无缝滚动图片的js和jquery两种写法

浏览数：31 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="JavaScript" type="text/javascript" src="js/jquery-1.4.2.js"></script>
<title>无缝滚动图片js和jquery</title>
<style>
*{ margin:0; padding:0;}
.wrap{ margin:100px auto; width:600px; border:1px solid #ccc; height:200px; overflow:hidden;}
.siler{ float:left; width:3000px;}
ul{ list-style:none;}
.siler li{ float:left;}
</style>

</head>

<body>
<div class="wrap" id="wrap">
<ul class="siler" id="siler">
<li class="s1" id="s1">
<ul>
<li><img src="images/01.jpg" /></li>
<li><img src="images/02.jpg" /></li>
<li><img src="images/03.jpg" /></li>
<li><img src="images/04.jpg" /></li>
</ul>
</li>
<li class="s2" id="s2"></li>
</ul>
</div>
<script>
/*var wrap=$(".wrap");
var s1=$(".s1");
var s2=$(".s2");
var time=30;
s2.html(s1.html());
function marquee(){
if(wrap.scrollLeft()>=s1.width())
{
wrap.scrollLeft(0);
}
else{
wrap.scrollLeft(wrap.scrollLeft()+1);
}
}
$(function(){
var s=setInterval(marquee,time);
wrap.hover(function(){
clearInterval(s);
},function(){
s=setInterval(marquee,time);
})

})  //jquery写法
*/
</script>
<script>
function $(id){return document.getElementById(id);}

var time=30;
var wrap=$("wrap");
var s1=$("s1");
var s2=$("s2");

s2.innerHTML=s1.innerHTML;
function marquee(){
if(wrap.scrollLeft>=s1.offsetWidth){
wrap.scrollLeft-=s1.offsetWidth;
}
else{
wrap.scrollLeft++;
}
}


var siling=setInterval(marquee,time);
wrap.onmouseover=function(){
clearInterval(siling);
}
wrap.onmouseout=function(){
siling=setInterval(marquee,time);
}


</script>
</body>
</html>