无缝轮播

轮播图大家都写过，但是怎么做到无缝切换对初学者来说是个难点。曾经也困惑了我很久，一直在研究，方法也很多，但是总是没有找到简便合适的。下面介绍一种，附上部分代码。

html代码：

   

           

           

           

           

           

       

       >

css部分代码：

  * {

        margin:0;

        padding:0;

        list-style:none;

    }

#box{

        width:300px;

        height:200px;

        margin:100px auto;

        position:relative;

        overflow:hidden;

    }

#box ul{

        width:1500px;

        height:200px;

    }

ul li{

        width:300px;

        height:200px;

        float:left;

    }

img{

        width:300px;

        height:200px;

    }

#left{

       width:20px;

        height:20px;

        position:absolute;

        left:10px;

        top:90px;

        border-radius:50%;

        background:#ccc;

        line-height:18px;

        font-size:20px;

        text-align:center;

        display:none;

        cursor:pointer;

    }

#right{

        width:20px;

        height:20px;

        position:absolute;

        right:10px;

        top:90px;

        border-radius:50%;

        background:#ccc;

        line-height:18px;

        font-size:20px;

        text-align:center;

        display:none;

        cursor:pointer;

    }

javascript的部分

    var oBox=document.getElementById('box');

    var oUl=document.querySelector('ul');

    var oLeft=document.getElementById('left');

    var oRight=document.getElementById('right');

//当鼠标移入时显示左右按键

    oBox.onmouseenter=function () {

         oLeft.style.display='block';

        oRight.style.display='block';

    };

//当鼠标移出时隐藏左右按键

    oBox.onmouseleave=function () {

        oLeft.style.display='none';

        oRight.style.display='none';

    };

//点击右键图片开始移动

    oRight.onclick=function () {

        oUl.style.transition='.7s all linear';

        oUl.style.transform='translateX(-300px)';

    };

    oUl.addEventListener('transitionend',function () {

         oUl.style.transition='';

        oUl.style.transform='translateX(0)';

        oUl.appendChild(oUl.children[0]);

    })

以上就是简单轮播图制作的部分代码。