jQuery 水平slider

最近做的一個slider，當滑鼠移到其中一個圓圈上面，就會滑到那一頁去。

準備像這樣的html
<div class="slide">
<div class="slide_img">
<img src="pic1.jpg">
<img src="pic2.jpg">
<img src="pic3.jpg">
<img src="pic4.jpg">
</div>
<ul class="pagenation">
</ul>
</div><!--slide-->

設定一下css，了解position的原理就可以了。

先根據有多少張圖，長出切換的圈圈。

view plaincopy to clipboardprint?

1. $(".slide_img img").each(function(){   
2.     $(".pagenation").append("<li></li>");   
3. });  

再根據圖片的數量調整div的寬度。

view plaincopy to clipboardprint?

1. $slideImgWidth=$i*(picture width);   
2. $(".slide_img").css("width",$slideImgWidth);  

最後再偵測是在哪一個圈圈，移動圖片的位置就好了。

view plaincopy to clipboardprint?

1. $(".pagenation").on("mouseenter", "li", function(e){   
2.     $pageNum=$(this).index();   
3.     $moveWidth=0-$pageNum*(picture width)+"px";   
4.     $(".slide_img").animate({left: $moveWidth });   
5. });  

Demo