JS--- 超简单轮播图

JS— 超简单轮播图

<div class="outer">
   <div class="inner">
        <ul>
        </ul>
    </div>
</div>

//轮播图 len:图片数量
function swiperMy(len){
    let widLi = $(".inner > ul").children().eq(0).width();
    let idx = 0;
    let num = -widLi;//向左走  每次定时器加这个值
    let all = widLi*len;
    $('.inner').css("width",all+'px');
    $('.inner ul li img').css("width",widLi+'px');
    setInterval(function(){
        var num1 = $(".inner > ul").position().left + num;
        if(num1 == -all)
        {
            num1 = 0;
        }
        $(".inner > ul").animate({"left":num1},500)
    }, 3000)
}


// js图片例子 调用
 let len = data.images.length;
 if(len>0){
     $('.outer').css('display','block')
     for(let i = 0;i<len; i++){ //banner
          let datas = data.images[i];
         str += `<li><img src="${datas}" alt=""></li>`
     }
 }else{
     $('.outer').css('display','none')
 }
 swiperMy(len);

css:

.outer{width:100%; height:205px; overflow:hidden; margin:0 auto;}
.inner{width:100%;  position:relative;}
.inner ul{ position:absolute; left:0; top: 0; list-style:none;}
.inner ul li{ float:left;list-style:none;}
.inner ul li img{ width:100%; height:205px;}