嗯!这个轮播图非常简单,主要是了解用setTimeOut做自循环。
css
*{
padding:0;margin:0;
}
ul{
position: relative;
}
li{
position: absolute;
top:0;
list-style: none;
width:600px;
}
li img{
width:100%;
}
html
<section>
<ul>
<li><img src="img/img1.jpg" alt=""></li>
<li><img src="img/img2.jpg" alt=""></li>
<li><img src="img/img3.jpg" alt=""></li>
</ul>
</section>
javascript
function scroll(n){
const lg = $('li').length-1;
// console.log(lg);
if(n>lg) n =0;
$('li').eq(n).css('display','block').siblings('li').css('display','none');
n++;
setTimeout('scroll('+n+')',2000);
}
window.onload = function(){
setTimeout("scroll(1)", 2000);
}