无缝滚动案例

最新推荐文章于 2022-11-05 16:33:29 发布

a63438840

最新推荐文章于 2022-11-05 16:33:29 发布

阅读量104

点赞数

原文链接：http://www.cnblogs.com/shanlu0000/p/11228666.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      *{
          margin:0;
          padding:0;
      }
        ul{
            list-style:none;
            position:absolute;   /* 用ul来做无缝滚动,所以要定位*/
            width:400%;  /*里面有4张图片*/
        }
        .box{
            width:600px;
            height:200px;
            border:1px solid black;
            background-color: pink;
            margin:100px auto;
            position:relative;
            overflow:hidden;
        }
        img{
            vertical-align: top;/*去除图片底部的三像素距离*/
        }
        .box ul li{
            float:left;
        }
    </style>
</head>
<body>
    <div class="box" id="demo">
        <ul>
            <li><img src="images/01.jpg" alt=""></li>
            <li><img src="images/02.jpg" alt=""></li>
            <li><img src="images/03.jpg" alt=""></li>
            <li><img src="images/04.jpg" alt=""></li>
            <li><img src="images/01.jpg" alt=""></li>  <!--最后面插入两张和前两张一样的图片，轮播图的原理-->
            <li><img src="images/02.jpg" alt=""></li>
        </ul>
    </div>

    <script>
            var demo=document.getElementById("demo");
            var ul=demo.children[0];
            var num=0;
            var Timer=null;
            Timer=setInterval(zidongbofang,3);
            function zidongbofang()
            {
                 num--;
                // if(num<=0 && num>= -1200)
                // {
                //     ul.style.left=num+"px";   //num值在-1200到0之间，left的值就是num
                // }
                // else{
                //     ul.style.left=0;//num值小于-1200,图片立刻从第五张的开头跳到第一张图片的开头，left值立刻等于0停下来
                //     num=0;
                // }

                 num<= -1200?  num=0 : num;  //if-else的判断，相当于
                 ul.style.left=num+"px";
            }

            demo.οnmοuseοver=function()  //鼠标一经过，定时器请清除，自动播放暂停
            {
                clearInterval(Timer);
            }
            demo.οnmοuseοut=function()
            {
                Timer=setInterval(zidongbofang,3); //鼠标一离开，定时器重新开启，继续自动播放
            }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/shanlu0000/p/11228666.html

a63438840

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无缝滚动案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; ...
复制链接

扫一扫