最近不是很忙，练习写了一个轮播图效果，虽然效果跟功能上貌似是没问题，但是我认为在许多东西上面都有待改进，在前端这个职位上我还有很远的路要走，当然要学的东西还有很多，这里仅仅对自己最近研究js的一个记录，我相信以后能写出更好的
将jquery框架的链接跟图片替换就可以看到效果了
源代码如下：
轮播图 <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); <br>}); <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>//下一个 <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>intervalTime = setInterval(picRun,s_time); <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>
