jQuery之定时器及图片轮播实例_jquery定时器自动轮播一次加载九张图片-CSDN博客

本文链接：https://blog.csdn.net/AgnesLuo/article/details/51141972

本文介绍了jQuery中setInterval的使用方法，包括其定义和语法，并通过一个实际的图片轮播案例展示了如何利用jQuery实现定时切换图片的效果，详细阐述了相关代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义和用法

  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');
                })  
            })