基于JQuery实现的幻灯片轮播(对时间间隔做严格控制)
<div class="tel_slide"> <div class="tel_slide_title">Title</div> <div class="slidebtn" id="left" ><!--左按钮--> <img alt="" src="images/left.png"> </div> <div class="tel_slide_content"> <img src="images/1.jpg"> </div> <div class="tel_slide_content"> <img src="images/2.jpg"> </div> <div class="tel_slide_content"> <img src="images/3.jpg"> </div> <div class="tel_slide_content"> <img src="images/4.jpg"> </div> <div class="slidebtn" id="right" ><!--右按钮--> <img alt="" src="images/right.png"> </div> <div class="slidebottombtn"><!--下面的数字--> <a href="javascript:void(0)">1</a> <a href="javascript:void(0)">2</a> <a href="javascript:void(0)">3</a> <a href="javascript:void(0)">4</a> </div> </div> <script type="text/javascript"> var begintime; var endtime; var cur = 0; var max = $(".tel_slide_content").size()-1; var duration = 3000; $(document).ready(function(){ $(".slidebtn").mouseover(function(){ var idattr = $(this).attr("id"); $(this).children("img").attr("src","images/"+idattr+"2.png"); }); $(".slidebtn").mouseout(function(){ var idattr = $(this).attr("id"); $(this).children("img").attr("src","images/"+idattr+".png"); }); $(".slidebtn").click(function(){ var lr = $(this).attr("id"); slide(1,1,lr=='left'?0:1); }); $(".slidebottombtn a").click(function(){ var target = $(this).html(); skipto(cur, target-1); }); slide(0,0,1);//第一次触发定时调用 }); //type:0-第一次调用,1-非第一次调用; //isman:0定时调用,1手工调用;lr左右 //lr:0-previous, 1-next function slide(isfirst,isman,lr){ if(isfirst==0){ //第一次触发 $(".slidebottombtn a").eq(0).css("color","red"); $(".tel_slide_content").eq(0).fadeIn(); setTimeout(function(){ slide(1,0,1); },duration); }else{ //非第一次触发 if(isman==0){ //自动调用 endtime = new Date().getTime(); var gap = endtime - begintime; if(gap<duration){ //要判断上一次切换跟现在的时间间隔,够3秒才切换。 setTimeout(function(){ slide(1,0,1); },gap); }else{ skipto(cur, cur==max?0:++cur); sdate = new Date(); begintime = sdate.getTime(); setTimeout(function(){ slide(1,0,1); },duration); } }else{ //手动调用 var from = cur; if(lr==0){ cur = cur==0?max:--cur; }else{ cur = cur==max?0:++cur; } skipto(from, cur); begintime = new Date().getTime(); setTimeout(function(){ slide(1,0,1); },duration); } } } function skipto(from, to){ $(".slidebottombtn a").eq(from).css("color","white"); $(".tel_slide_content").eq(from).fadeOut(); $(".tel_slide_content").eq(to).fadeIn(); $(".slidebottombtn a").eq(to).css("color","red"); begintime = new Date().getTime(); cur = to; } </script>