javascript实现图片循环滚动效果

如图，图片实现无缝滚动，点击向左向右滚动控制方向，且当鼠标悬浮在div中时，图片停止滚动；当鼠标离开div中，图片继续滚动。

原理：复制一遍整个ul，给定一个速度让ul向右或向左滚动，当整个ul要滚动到div边界时，再将整个复制的ul向左或向右拖拽直至整个ul中的图片归位。

图①

图②

图③

图④

图⑤

如图图片向左滚动，当运动到图③位置时，offsetLeft就小于二分之一ul的宽度，此时将ul中的第一个图片拉回到起点即图①的位置；

同理当图片向右滚动运动到图④位置，此时在div内部的ul的offsetLeft就大于0，将ul中的第八个图片拉回到原位即图⑤的位置。

上代码：

100

101

102

103

104

105

106

107

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>无缝滚动，移入暂停</title>
<style>
body,div,ul,li,p
{
    padding: 0;
    margin: 0;
}
#div1
{
    position: relative;
    margin: 10px auto;
    border: 1px solid black;
    width: 680px;
    height:170px;
    overflow: hidden;
}
#div1 ul
{
    position: absolute;
    left:0;
}
#div1 ul li
{
    float:left;
    padding: 10px;
    list-style: none;
    width: 150px;
    height: 150px;
}
#div1 ul li img
{
    width: 150px;
    height: 150px;
}
</style>
<script>
window.onload = function()
{
    var oDiv = document.getElementById("div1");
    var oUl = document.getElementsByTagName("ul")[0];
    var oLi = document.getElementsByTagName("li");
    var oA = document.getElementsByTagName("a");
    var timer = null;
    var iSpeed = 8;
    //复制一遍ul
    oUl.innerHTML +=oUl.innerHTML;
    //ul的宽度是所有li宽度之和，复制ul之后的整个ul的宽度就是li的长度乘以一个li的宽度
    oUl.style.width = oLi.length*oLi[0].offsetWidth + "px";
    function fnMove()
    {
        //图片向左移动时的条件，即在div里的ul的offsetLeft小于一个ul的宽度
        if (oUl.offsetLeft<-oUl.offsetWidth/2)
        {
            //将整个复制的ul向右拖拽直至整个ul中的第一张图归位到起点
            oUl.style.left = 0;
        }
        //图片向右移动时的条件，即在div里的ul的offsetLeft大于等于0
        else if (oUl.offsetLeft>=0)
        {
            //将整个复制的ul向左拖拽直至整个ul中的第一张图归位到起点
            oUl.style.left = -oUl.offsetWidth/2 + "px";
        }
        //给ul一个速度让整个ul的offsetLeft增加或减少，速度为正则向右移动，速度为负则向左移动
        oUl.style.left = oUl.offsetLeft +iSpeed + "px";
    }
    timer=setInterval(fnMove,30)
    //点击向左滚动即触发第一个a元素标签
    oA[0].onclick = function()
    {
        iSpeed = -8;
    }
    //点击向右滚动即触发第二个a元素标签
    oA[1].onclick = function()
    {
        iSpeed = 8;
    }
    //当鼠标移动到div里面的时候图片滚动暂停，此时清除定时器即可。
    oDiv.onmouseover = function()
    {
        clearInterval(timer);
    }
    //当鼠标移出div的时候图片继续滚动，此时重新加载定时器。
    oDiv.onmouseout = function()
    {
        timer=setInterval(fnMove,30);
    }
}
</script>
</head>
<body>
<div id="div1">
    <ul>
        <li><img src="img/1.png"></li>
        <li><img src="img/2.png"></li>
        <li><img src="img/3.png"></li>
        <li><img src="img/4.png"></li>
    </ul>
</div>
<a href="javascript:;">向左滚动</a>
<a href="javascript:;">向右滚动</a>
</body>
</html>