基于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>

 

posted @ 2014-09-12 17:15  精进中的昆杰  阅读(669)  评论(0编辑  收藏  举报