无缝滑动展示图片

==> 学习汇总（持续更新）
==> 从零搭建后端基础设施系列（一）-- 背景介绍

---

效果如图:

用到的素材:

原理如下:
假设一开始向左移动
初始位置如图:

移动一圈后如图:

最重要的来了,因为左边已经没有照片了,所以接着滑动的话就会出现空白.这时候的条件是offsetLeft == -offsetWidth/2,所以当出现offsetLeft < -offsetWidth/2的时候就把整个ul给还原到(0,0)位置,如图:

因为这个‘拉回去’的过程非常快,所以人眼看起来就像衔接起来的滑动一样.

向右的原理也是一样的.

HTML代码:

 <div id="ctrl">
        <a href="javascript:;" class="btn-left" id="btn-left"></a>
        <a href="javascript:;" class="btn-right" id="btn-right"></a>
        <div id="play">
            <ul>
                <li><a href="javascript:;"><img src="imgs/1.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="imgs/2.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="imgs/3.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="imgs/4.png" alt=""></a></li>
            </ul>
        </div>
    </div>

CSS代码：

*{margin:0;padding:0;}
        ul,li{list-style-type: none;}
        a{background: none;}
        /*最外围控制区*/
        #ctrl{width:939px;height: 150px;position:relative;margin:20px auto;}
        /*最外围控制区结束*/
        /*滑动区域*/
        #ctrl #play{width:800px;height: 150px;position: relative;margin:0 auto;overflow: hidden;}
        /*滑动区域结束*/
        /*图像列表*/
        #ctrl #play ul{position:absolute;left:0;top:0;}
        #ctrl #play ul li{width:200px;height:150px;float: left;}
        /*图像列表结束*/
        /*左右按钮*/
        #ctrl a.btn-left{display:block;position: absolute;left: 0;top:41px;width:68px;height: 68px;
            background: url("imgs/btn.jpg") no-repeat -70px -69px;}
        #ctrl a.btn-left:hover{background-position: -70px 0;}
        #ctrl a.btn-right{display:block;position: absolute;right: 0;top:41px;width:68px;height: 68px;
            background: url("imgs/btn.jpg") no-repeat 0 -70px;}
        #ctrl a.btn-right:hover{background-position: 0 0;}
        /*左右按钮结束*/

JS代码:

window.onload = function () {
            var oDiv = document.getElementById('play');
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');
            var oBtnLeft = document.getElementById('btn-left');
            var oBtnRight = document.getElementById('btn-right');
            var TimeId = 0;
            var speed = -5;//控制方向和速度大小
            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; //复制一份,用来无缝衔接
            oUl.style.width = aLi[0].offsetWidth*aLi.length + 'px';//aLi会自动变为8个，所以不用手动乘2
            TimeId = setInterval(startMove,30); //设置定时器，开始滑动
            oDiv.onmouseover = function (){clearInterval(TimeId);};  //鼠标移入移出暂停继续的效果
            oDiv.onmouseout = function(){TimeId = setInterval(startMove,30);};
            oBtnLeft.onmouseover = function () {speed = -5};  //左右移动的控制
            oBtnRight.onmouseover = function () {speed = 5};
            function startMove()
            {
                if(oUl.offsetLeft < -oUl.offsetWidth/2)  //向左移动
                    oUl.style.left = 0;
                if(oUl.offsetLeft > 0)                  //向右移动
                    oUl.style.left = -oUl.offsetWidth/2 + 'px';
                oUl.style.left =  oUl.offsetLeft + speed + 'px';
            }
        };