无缝轮播图

编辑本博客

  • 巧用定时器

  • 获取标签方式
  • 清理定时器
  • 记住当前位置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝轮播</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style:none;
        }
        .warper{
            width: 400px;
            height: 319px;
            /*background-color: #A9A9A9;*/
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        ul li{
            float: left;
        }
        ul{
            width: 800%;
            position: absolute;
            top: 0;
            left: 0;

        }
        ul li img{
            width: 400px;
            height: 319px;
        }
    </style>
</head>
<body>
    <div id="lb" class="warper">
        <ul>
            <li><img src="img/lb/1.jpg"> </li>
            <li><img src="img/lb/2.jpg"> </li>
            <li><img src="img/lb/3.jpg"> </li>
            <li><img src="img/lb/4.jpg"> </li>
            <li><img src="img/lb/5.jpg"> </li>
            <li><img src="img/lb/6.jpg"> </li>
            <li><img src="img/lb/7.jpg"> </li>
            <li><img src="img/lb/8.jpg"> </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    var box=document.getElementsByClassName("warper")[0];
    var ul=box.children[0];<!--获取子集第一个标签-->
    var num=0;//一定要在循环外面记住left位置
    var timer=null;
    timer=setInterval(autoPlay,30);//打卡页面就开始播放
    function autoPlay(){
            num--;
            num <= -2800?num=0:num;<!--如果num小于-3200，num=0，否则num-->
            ul.style.left=num+"px";
    }
    //鼠标放上去清除定时器，即暂停播放
    box.onmouseover=function () {
        clearInterval(timer);
    };
    //鼠标移走，先清除定时器，再开启轮播
    box.onmouseout=function () {
        clearInterval(timer);
        timer=setInterval(autoPlay,30);
    }
</script>
</html>
View Code

 

posted @ 2018-06-17 10:32  丫丫625202  阅读(130)  评论(0)  编辑  收藏  举报