首页 > 代码库 > 基于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实现的幻灯片轮播(对时间间隔做严格控制)