图片无缝滚动

无缝滚动效果一

dom代码：

<div class="banner" id="bannerBox">
      <ul>
        <li v-for="(item,index) in imgList" :key="index">
                    <img :src="item.img" class="imgEvery"/>
                </li>
      </ul>
    </div>

 

methods代码：

initBanner(){
                var odiv = document.getElementById('bannerBox');
        var oul = odiv.getElementsByTagName('ul')[0];
        var ali = oul.getElementsByTagName('li');
        var spa = -2;
        oul.innerHTML=oul.innerHTML+oul.innerHTML;
        oul.style.width=ali[0].offsetWidth*ali.length+'px';
        function move(){
          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+spa+'px';
        }
        var timer = setInterval(move,30)

        odiv.onmousemove=function(){clearInterval(timer);}
        odiv.onmouseout=function(){timer = setInterval(move,30)};
            },

 

css代码：

.banner{
    width:480px;
    overflow: hidden;
    position: relative;
    height: 160px;
    ul{
       width:480px;
        height:160px;
        position: relative;
        margin: 0px;
        padding: 0px;
        li:first-child{
            margin-left:0px;
        }
        li{
            height: 150px;
            float: left;
            list-style: none;
            padding-right:10px;
            .imgEvery{
                width: 150px;
                height: 150px;
                display: inline-block;
                cursor: pointer;
            }
        }
    }
}