无缝滚动图片

最新推荐文章于 2017-08-03 11:19:43 发布

erdouzhang

最新推荐文章于 2017-08-03 11:19:43 发布

阅读量327

点赞数

分类专栏：轮播

本文链接：https://blog.csdn.net/erdouzhang/article/details/62041464

版权

轮播专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在线演示
这里写图片描述
html:

<body>
    <div class="box" id="scroll">
        <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>
</body>

CSS:

<style>
    *{margin: 0;padding: 0;}
    ul{list-style: none;}
    img{vertical-align: top;} /*去掉上下两张图片之间的默认间隙距离*/
    .box{
        width: 600px;
        height: 200px;
        margin: 100px auto;
        background-color: pink;
        overflow: hidden;
        position: relative;
    }
    .box ul li{
        float: left;
    }
    .box ul{
        width: 400%;    /*四张图片就是百分之四百*/
        position: absolute;/*大盒子做动画，就给大盒子定位*/
        left: 0;
        top: 0;
    }
</style>

JS:

<script>
    window.onload = function(){
        var scroll = document.getElementById("scroll");/*获取无缝滚动盒子*/
        var ul = scroll.children[0];//获取盒子的所有孩子，孩子都要加[0]无论几个孩子,因为得到的是数组
        var num = 0;//控制左侧值left
        var timer = null;   //声明定时器
        timer = setInterval(autoPlay,5);
        function autoPlay(){
            num--;
            num <=-1200 ? num = 0 : num;    //一张图宽300，四张1200，左为负                
            ul.style.left = num+"px";
        }
        scroll.onmouseover = function(){
            clearInterval(timer);
        }
        scroll.onmouseout = function(){
            timer = setInterval(autoPlay,5);
        }
    }
</script>

erdouzhang

关注

0
点赞
踩
0

收藏

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

在线演示html: <body> <div class="box" id="scroll"> <ul> <li><img src="images/01.jpg" alt=""></li> <li><img src="images/02.jpg" alt=""></li> <li><img src="ima
复制链接

扫一扫

专栏目录