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;}