码迷,mamicode.com
首页 > Web开发 > 详细

基于JQuery实现的幻灯片轮播(对时间间隔做严格控制)

时间:2014-09-12 18:46:04      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   java   ar   div   sp   cti   

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

 

基于JQuery实现的幻灯片轮播(对时间间隔做严格控制)

标签:style   blog   color   io   java   ar   div   sp   cti   

原文地址:http://www.cnblogs.com/leekenky/p/3968778.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!