jQuery之定时器及图片轮播实例

定义和用法

  setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

  setInterval() 方法会不停地调用函数，直到clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

setInterval(code,millisec[,”lang”])
code：调用的函数或者代码串
millisec：周期性执行或调用 code 之间的时间间隔（单位是毫秒）

--每隔一秒就调用clock()方法，该方法主要是把得到的时间传到id为clock元素中
function clock()
 {
var t=new Date()
      document.getElementById("clock").value=t
      }
var time=self.setInterval("clock()",1000)

图片轮播实例

具体代码如下：

    --html代码

<div class="fl_s">
<div class="tu">
<img src="image/nb1s1.jpg" alt="" style="display:block;" />
<img src="image/nb1s2.jpg" alt="" />
<img src="image/nb1s3.jpg" alt="" />
<img src="image/nb1s4.jpg" alt="" />
</div>
<div class="ups">
<a href="javascript:void(0)" class="btn_left"></a>
<a href="javascript:void(0)" class="btn_right"></a>
</div>

<div class="dos">
<div class="dor">
<a class="doro"></a>
<a class="doro"></a>
<a class="doro"></a>
<a class="doro"></a>
</div>
</div>
</div>

---

    --css代码
.fl_s{
width:960px;
height:416px;
float:left;
position:absolute;
top:1px;
left:237px;
}
.tu{
width: 960px;
height: 416px;
}
.tu img{
width:960px;
height:416px;
display:none;
position:absolute;
top:0;
left:0;
}
.ups{
display: none;
}
.btn_left{
width: 34px;
height: 44px;
background: url(image/btn_left1.png) no-repeat;
position: absolute;
left: 0;
top: 200px;
cursor: pointer;
}
.btn_right{
width: 34px;
height: 44px;
background: url(image/btn_right1.png) no-repeat;
position: absolute;
right: 0;
top: 200px;
cursor: pointer;
}
.dos{
width: 440px;
height: 17px;
line-height: 17px;
text-align: center;
position: absolute;
right: 225px;
bottom: 35px;
}
.dor{
width: 440px;
height: 17px;
line-height: 17px;
text-align: center;
}
.dor .doro{
height: 10px;
width: 10px;
background: #FFFFFF;
border-radius: 10px;
margin-right: 22px;
display: inline-block;
cursor: pointer;
list-style: none;
}
.dor .dors{
width: 12px;
height: 12px;
border-radius: 10px;
margin-bottom: -4px;
line-height: 17px;
border: 3px solid #fff;
background: 0;
}

---

--js中的代码
    $(function(){
var c = 0
function timer(){
        c++;
        c=(c==4)?0:c;
//获得序号
        $('.fl_s .tu img').eq(c).stop().show().siblings().hide();
        $('.fl_s .dos .dor a').eq(c).stop().addClass('dors').siblings().removeClass('dors');
          }

        time = setInterval(timer,1000);
        $('.fl_s').hover(function(){
//清除定时器//显示图片
             clearInterval(time);
             $('.ups').css({'display':'block'});
            },function(){
//回调函数//恢复定时器//隐藏图片
            $('.fl_s .ups').css({'display':'none'});
            time = setInterval(timer,1000);
            })
//右单击
        $('.fl_s .btn_right').click(function(){
            c++;
            c=(c==4)?0:c;
//获得的序号
             $('.fl_s .tu img').eq(c).stop().show().siblings().hide();
            $('.fl_s .dos .dor a').eq(c).stop().addClass('dors').siblings().removeClass('dors');
        })
//左单击
        $('.fl_s .btn_left').click(function(){
            c--;
            c=(c==0)?0:c;
//获得序号
            $('.fl_s .tu img').eq(c).stop().show().siblings().hide();
             $('.fl_s .dos .dor a').eq(c).stop().addClass('dors').siblings().removeClass('dors');
        })
//点击圆点变换
                $('.fl_s .dos .dor a').click(function(){
//获得序号
var n = $(this).index();

                    $('.fl_s .tu img').eq(n).stop().show().siblings().hide();

                $('.fl_s .dos .dor a').eq(n).stop().addClass('dors').siblings().removeClass('dors');
                })  
            })