无缝滚动

如何实现几张图片一直轮播。鼠标经过图片时它就暂停。

1、<div class="demo">

<div class="demobox">

           <div class="demo1">

                  <img src="img/1.jpg"/>

                 <img src="img/2.jpg"/>

                  <img src="img/3.jpg"/>

           </div>

           <div class="demo2"></div>

</div>

<div>

2、添加样式

.demo{overflow:hidden;height:300px;width:auto;}

.demobox{float:left;width:800%;}

.demo1{float:left;margin-right:30px;}

.demo2{float:left;}

3.写js文件

      var odemo=document.getElementById("demo");
var odemo1=document.getElementById("demo1");
var odemo2=document.getElementById("demo2")
odemo2.innerHTML=odemo1.innerHTML;
function a(){
 if(odemo2.offsetWidth-odemo.scrollLeft<=0){   //odemo2可见的宽度比滚动条距离左边的距离小时。滚动条距离左边的距离减少到
odemo.scrollLeft-=odemo1.offsetWidth;  //
 }
 odemo.scrollLeft++;     //滚动条距离左边的距离增加，图片一直左移
}
var move=setInterval(a,20);    //每20ms运动一次a这个函数
odemo.onmouseenter=function(){clearInterval(move)};  //鼠标进入清除鼠标事件
odemo.onmouseout=function(){move=setInterval(a,20)}; //鼠标移出开始鼠标事件