首页 > 代码库 > 基于JQuery实现的幻灯片轮播(对时间间隔做严格控制)
基于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="http://www.mamicode.com/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-nextfunction 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>
基于JQuery实现的幻灯片轮播(对时间间隔做严格控制)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。