2012年11月17日 星期六

jQuery 水平slider

horizontal_slide

最近做的一個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的原理就可以了。

先根據有多少張圖,長出切換的圈圈。
  1. $(".slide_img img").each(function(){   
  2.     $(".pagenation").append("<li></li>");   
  3. });  

再根據圖片的數量調整div的寬度。
  1. $slideImgWidth=$i*(picture width);   
  2. $(".slide_img").css("width",$slideImgWidth);  

最後再偵測是在哪一個圈圈,移動圖片的位置就好了。
  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

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...