jQuery-轮播图

轮播概念图

 

轮播图的轮播方式是自动每隔一段时间向左移动一张图，循环滚动.

<div>
<ul class="pics-list">
<li><a href="#"><img src=""/></a></li>
<li><a href="#"><img src=""/></a></li>
<li><a href="#"><img src=""/></a></li>
<li><a href="#"><img src=""/></a></li>
<li><a href="#"><img src=""/></a></li>
</ul>
<ul class="points-list">
<li class="active">●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
</ul>

</div>

li点击事件（获取点击当前li的索引）

点击圆点会回到圆点对应的图片

$(".points-list li").click(function(){
$(this).addClass("active").siblings().removeClass("active")
var num = $(this).index();
$(".pics-list").css("left",-1*width*num+"px")
})

 setInterval()方法

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭

每三秒3秒弹出 "Hello" ：setInterval(function(){ alert("Hello"); }, 3000); 

获取ul中li的数量（length）

$("ul li").length

 

获取ul中li的宽度

$("ul li").width()