js实现无缝循环滚动
本文实例为大家分享了js无缝循环滚动实现代码，供大家参考，具体内容如下
1、图片格式：260*400.
2、使用循环定时器轻松实现
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>无缝滚动</title>
</head>
<styletype="text/css">
.row{
width:1298px;
height:400px;
border:1pxsolid;
box-shadow:2px2px2px#000;
overflow:hidden;
}
.box{
position:relative;
}
.box1,.box2{
width:1298px;
position:absolute;
}
.box2{
left:1298px;
}
img{
float:left;
}
</style>
<body>
<divclass="row">
<divclass="box"id="box">
<divclass="box1"id="box1">
<imgsrc="images/1.jpg">
<imgsrc="images/2.jpg">
<imgsrc="images/3.jpg">
<imgsrc="images/4.jpg">
<imgsrc="images/5.jpg">
</div>
<divclass="box2"id="box2">
<imgsrc="images/1.jpg">
<imgsrc="images/2.jpg">
<imgsrc="images/3.jpg">
<imgsrc="images/4.jpg">
<imgsrc="images/5.jpg">
</div>
</div>
</div>
</body>
<scripttype="text/javascript">
window.onload=function(){
var_box1=document.getElementById("box1");
var_box2=document.getElementById("box2");
varx=0;
varfun=function(){
_box1.style.left=x+'px';
_box2.style.left=(x+1298)+'px';
x--;
if((x+1298)==0){
x=0;
}
}
setInterval(fun,1);
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助。
热门推荐
1 泰迪狗狗如何训练
3 狗狗训练图
5 狗狗训练方法
6 训练狗狗不咬人
8 敏捷训练狗狗
10 训练狗狗吃饭
11 泰迪狗狗训练
12 狗狗从多大开始训练
13 狗狗训练学校费用
14 怎么去训练狗狗
15 狗狗训练狗狗
16 狗狗训练教程
17 训练狗狗装死
18 泰迪狗狗的训练方法