javascript无缝滚动示例-CSDN博客

效果

图片大小均为200*200;

默认向左循环滚动;

鼠标悬浮暂停，鼠标移走继续滚动;

可以在此基础进行扩展。

下面是代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        #main{
            width:800px;
            margin:100px auto;
            text-align:center;
        }
        #box{
            width:800px;
            height:200px;
            margin:20px auto;
            position:relative;/*相对于起点*/
            /*background:red;*/
            overflow:hidden;
        }
        ul{
            position:absolute;
            left:0px;
            top:0px;
        }
        ul li{
            list-style:none;
            width:200px;
            height:200px;
            float:left;
            margin:0px 1px;
        }
        #main button{
            padding:10px;
            margin:0px 10px;
            border:0px;
            background:#ddd;
        }
        #main button:hover{
            background:#E9AF16;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div id="main">
        <h2>无缝滚动</h2>
        <div id="box">
            <ul>
                <li><img src="images/p1.jpg" alt="p1"></li>
                <li><img src="images/p2.jpg" alt="p2"></li>
                <li><img src="images/p3.jpg" alt="p3"></li>
                <li><img src="images/p4.jpg" alt="p4"></li>
            </ul>
        </div>
        <button>向左</button><button>向右</button>
    </div>

    <script>
        var oBox=document.getElementById("box");
        var aUl=oBox.getElementsByTagName("ul")[0];
        var aLi=oBox.getElementsByTagName("li");
        var speed=2;

        aUl.innerHTML=aUl.innerHTML+aUl.innerHTML;//使li增加一倍
        aUl.style.width=aLi[0].offsetWidth*aLi.length+"px";//修改aUl框的宽度,注意单位

        function move(){
            //向左移动aUl.offsetLeft是负的,我们需要把aUl的一半宽度放置在div右侧
            if(aUl.offsetLeft<-aUl.offsetWidth/2){
                aUl.style.left=0+"px";//将ul放回原位
            }
            //向右移动aUl.offsetLeft是大于0的,我们需要把aUl的一半宽度放置在div左侧
            if(aUl.offsetLeft>0){
                aUl.style.left=-aUl.offsetWidth/2+"px";//放置在div左侧,left为负值
            }
            aUl.style.left=aUl.offsetLeft-speed+"px";//整体移动ul,右
        }

        timer=setInterval(move,30);

        aUl.onmouseover=function(){
            clearInterval(timer);
        }

        aUl.onmouseout=function(){
            timer=setInterval(move,30);
        }

        var aBtn=document.getElementsByTagName("button");
        aBtn[0].onmouseover=function(){
            speed=2;
        }
        aBtn[1].onmouseover=function(){
            speed=-2;
        }
    </script>
</body>
</html>