利用jquery寫的左右輪播圖特效_jquery

最近不是很忙，練習寫了一個輪播圖效果，雖然效果跟功能上貌似是沒問題，但是我認為在許多東西上面都有待改進，在前端這個職位上我還有很遠的路要走，當然要學的東西還有很多，這裡僅對自己最近研究js的一個記錄，我相信以後能寫出更好的

將jquery框架的鏈接跟圖片替換就可以看到效果了

原始碼如下：

複製程式碼 程式碼如下:

• 


• 


• 


• 


• 

1
2
3
4
5

<script> <BR>var b_width = 1000; // 大圖的寬度<BR>var speed = 500; // 圖片向左移動速度<BR>var s_time = 3000 //圖片自動滾動速度<BR>var pic_li = $("#lunbo_pic").children("li"); <BR>$(document).ready(function(e) { <BR>var $ul_width= pic_li.width() * pic_li. length; //輪播圖的寬度<BR>$("#lunbo_pic").width($ul_width); <BR>var small_width = $(".lunbo_curso>a").width() * $(". lunbo_curso>a").length; <BR>$(".lunbo_curso").width(small_width); <BR>$(".lunbo_curso").css("margin-left",-small_width/2); <width/2); <width/2); 🎜>}); <BR><br><br><br>$(document).live("click",function(e){ <br>$target = $(e.target); <BR>var id = $target.attr('id'); <BR>if($target.is("a") && $target.parent($("#lunbo_curso")) ){ <BR>$target.addClass( "small_xz").siblings().removeClass('small_xz'); <BR>var mar_lf = parseInt($target.index() * b_width); <BR>$("#lunbo_pic").animate({ <BR>left : -mar_lf <BR>},speed); <BR>} <BR>if(id == "arr_l"){ <BR>prePage(); <BR>} <BR>if(id == " arr_r"){ <BR>nextPage(); <BR>} <BR>}); <BR>//上一<BR>function prePage(){ <BR>if($(".small_xz").index () == 0){ <BR>$("#lunbo_pic").css("left",-4000); <BR>$("#lunbo_pic").animate({ <BR>"left": - parseInt(pic_li.length *b_width - b_width) <BR>},speed); <BR>$("#lunbo_curso>a").eq(pic_li.length - 1).addClass("small_xz").siblings() .removeClass("small_xz"); <BR>$(".small_xz").index() == pic_li.length - 1; <BR>}else{ <BR>$("#lunbo_curso>a").eq ($(".small_xz").index()-1).addClass("small_xz").siblings().removeClass("small_xz"); <BR>var mar_lf2 = parseInt($("#lunbo_pic"). css("left")) b_width; <BR>$("#lunbo_pic").animate({ <BR>"left": mar_lf2 <BR>},speed); <BR>} <BR>} <BR>},speed); <BR>} <BR>} <BR> //下一個<BR>function nextPage(){ <BR>if($(".small_xz").index() == pic_li.length -1){ <BR>$("#lunbo_pic").css( "left",0); <BR>/*$("#lunbo_pic").animate({ <BR>"left": 0 <BR>},speed);*/ <br>$("#lunbo_curso> a").eq(0).addClass("small_xz").siblings().removeClass("small_xz"); <br>$(".small_xz").index() == 0; <br><br>}else{ <BR><BR>$("#lunbo_curso>a").eq($(".small_xz").index() 1).addClass("small_xz").siblings().removeClass(" small_xz"); <BR>var mar_lf2 = parseInt($("#lunbo_pic").css("left")) - b_width; <BR>$("#lunbo_pic").animate({ <BR>"left" : mar_lf2 <BR>},speed); <br>} <br>} <BR><BR>function picRun(){ <BR>nextPage(); <br>} <br>interval ); <BR><BR>$("#pic_carousel").on("mouseover",function(){ <BR>clearInterval(intervalTime); <BR>}); <BR>$("#pic_carousel") .on("mouseout",function(){ <br>intervalTime = setInterval(picRun,s_time);; <br>}); <BR><BR></script>