文章目录

无缝轮播图

2017-03-20   |     |     |  

原理

轮播图的原理就是:

  1. 父盒子的overflow:hidden 2
  2. 子盒子多图拼接
  3. 定时改变left
  4. 播放完毕从头开始

但是要实现无缝的播放,关键是让用户感受不到播放到尾部再跳转的感觉,所以正确做法是首图多复制一份放在尾部。

布局

your text

your text

<div class="father">
        <ul id='scroll'>
            <li><img src="images/1.png" alt="" /></li>
            <li><img src="images/2.png" alt="" /></li>
            <li><img src="images/3.png" alt="" /></li>
            <li><img src="images/4.png" alt="" /></li>
            <li><img src="images/5.png" alt="" /></li>
            <li><img src="images/1.png" alt="" /></li>
        </ul>
    </div>

css:

        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            height: 200px;
            position: relative;
            margin: 50px auto;
            border: 2px solid #999;
            overflow: hidden;
        }
        .father ul{
             width: 600%;
             list-style: none;
             position: absolute;
             background: pink;
        }
        .father li{
            float: left;
            width: 400px;
            height: 200px;
        }

js:

window.onload = function  (argument) {
        function $(id) { 
            return document.getElementById(id);
        }
        var left = 0;
        function Myscroll(){
            var timer = setInterval(function(){
                left -= 100;
                if(left < -2000){
                    left = -100;    //根据你每次left减少的值定
                }
                $('scroll').style.left = left+'px';
            },100)
        }
        Myscroll();
    }

效果

  1. 100ms,left每次变化-100,然后left跳转到0,这时候很明显能感到跳到首页的一个卡顿

    your text

    1. 把left重置为-100,解决问题

      your text

    当然,你也可以让滚动速度慢一点,调整left每次变化的值,调整时间间隔就好了