最新版本：jquery的特殊效果（5）-轮播图片③（鼠标悬停以停止轮播）

自动定期旋转图片的jQuery程序，手动单击转盘的jQuery程序以及当鼠标悬停在转盘上时停止转盘的jQuery程序

今天非常无聊，所以我将继续写轮播图片。我需要说明的是，这次轮播图片是上一篇文章中的jquery特效（3）-轮播图片①（手动单击轮播）和jquery特效（4）-轮播图片②（定时自动轮播）是根据本文的内容编写的，该文章显示了手动单击轮播效果，预定的自动轮播效果以及鼠标悬停在图片上以停止旋转的功能。建议您阅读我昨天写的笔记后再阅读本文。

首先查看最终的动态渲染：

上面的主要显示效果是，当鼠标悬停时，图片停止滚动。屏幕截图软件是绿色版本，因此显示效果要快一些，但是一般效果已经出现。

一、主程序

    
        
        
        
    
    
        

            
            

                

                

                

                

            
            
            
            
            

                1
                2
                3
                4
            
            
        
        
        
    

嗯，上面的主程序与前两个注释没有什么不同，没有任何修改，如果您感兴趣，可以看到jquery的特殊效果（3）-轮播图片①（手动单击轮播））注释说明，我这次是论文的重点在Jquery程序中

二、CSS样式

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
.slideShow{
    width: 346px;
    height: 210px;     /*其实就是图片的高度*/
    border: 1px #eeeeee solid;
    margin: 100px auto;
    position: relative;
    overflow: hidden;    /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
    width: 2000px;
    position: relative;     /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
    float: left;     /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
    width: 346px;
}
.slideShow .showNav{     /*用绝对定位给数字按钮进行布局*/
    position: absolute;
    right: 10px;
    bottom: 5px;
    text-align:center;
    font-size: 12px;    
    line-height: 20px;
}
.slideShow .showNav span{
    cursor: pointer;
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    background: #ff5a28;
    margin-left: 2px;
    color: #fff;
}
.slideShow .showNav .active{
    background: #b63e1a;
}

嘿，上面的样式程序与前两个注释没有区别，没有任何修改。如果您有兴趣，可以看到jquery的特殊效果（3）-轮播图片①（手动单击轮播）注释说明），本文的重点将放在Jquery程序中

三、jQuery程序

首先，让我谈谈停止鼠标悬停图片轮播的原理：

1、当鼠标悬停在框架上时，清除计时器，即使用clearInterval（timer）关闭计时器并停止自动轮播。

2、当鼠标离开框架时，重新启动计时器

3、借助悬停功能，鼠标悬停和离开

hover（over，out）是一种模拟悬停事件（鼠标移入和移出对象）的方法。这是一种自定义方法，可为常用任务提供“保持”状态。

参数：

over（功能）：将鼠标移到元素上时要触发的功能。

out（功能）：当鼠标移出元素时要触发的功能。

让我们看一下下面的jQuery程序：

$(document).ready(function(){
    var slideShow=$(".slideShow"),     //获取最外层框架的名称
        ul=slideShow.find("ul"),      
        showNumber=slideShow.find(".showNav span"),//获取按钮
        oneWidth=slideShow.find("ul li").eq(0).width();   //获取每个图片的宽度
        var timer=null;   //定时器返回值，主要用于关闭定时器
        var iNow=0;      //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
        
        /*手动点击按钮进行图片轮播代码开始*/
        showNumber.on("click",function(){           //为每个按钮绑定一个点击事件      
            $(this).addClass("active").siblings().removeClass("active");   //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
            var index=$(this).index();  //获取哪个按钮被点击，也就是找到被点击按钮的索引值
            iNow=index;
            ul.animate({
                "left":-oneWidth*iNow,   //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNow确定
            })
        });
        /*手动点击按钮进行图片轮播代码结束*/
        
        
        /*定时自动轮播图片代码开始*/
        timer=setInterval(function(){        //打开定时器
            iNow++;                          //让图片的索引值次序加1，这样就可以实现顺序轮播图片
            if(iNow>showNumber.length-1){    //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
                iNow=0;
            }
            showNumber.eq(iNow).trigger("click");    //模拟触发数字按钮的click
        },2000);   //2000为轮播的时间
        /*定时自动轮播图片代码结束*/
        
        /*鼠标悬浮图片停止轮播代码开始*/
        slideShow.hover(
            function(){
                clearInterval(timer);
            },function(){
                timer=setInterval(function(){        //打开定时器
                    iNow++;                          //让图片的索引值次序加1，这样就可以实现顺序轮播图片
                    if(iNow>showNumber.length-1){    //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
                        iNow=0;
                    }
                    showNumber.eq(iNow).trigger("click");    //模拟触发数字按钮的click
                },2000);   //2000为轮播的时间
            }
        );
        /*鼠标悬浮图片停止轮播代码结束*/
})

从上图中，我们可以看到重复了启动计时器的代码，因此在这里您可以定义一个自动播放函数autoPlay（）来简化代码。简化的代码如下：

/*定时自动轮播图片代码开始*/
        function autoPlay(){
            timer=setInterval(function(){        //打开定时器
            iNow++;                          //让图片的索引值次序加1，这样就可以实现顺序轮播图片
            if(iNow>showNumber.length-1){    //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
                iNow=0;
            }
            showNumber.eq(iNow).trigger("click");    //模拟触发数字按钮的click
            },2000);   //2000为轮播的时间
        }
        autoPlay();
 /*定时自动轮播图片代码结束*/

不要忘记在定义完成后调用此函数，即autoPlay（）;

然后jQuery程序的最终版本如下：

$(document).ready(function(){
    var slideShow=$(".slideShow"),     //获取最外层框架的名称
        ul=slideShow.find("ul"),      
        showNumber=slideShow.find(".showNav span"),//获取按钮
        oneWidth=slideShow.find("ul li").eq(0).width();   //获取每个图片的宽度
        var timer=null;   //定时器返回值，主要用于关闭定时器
        var iNow=0;      //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
        
        /*手动点击按钮进行图片轮播代码开始*/
        showNumber.on("click",function(){           //为每个按钮绑定一个点击事件      
            $(this).addClass("active").siblings().removeClass("active");   //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
            var index=$(this).index();  //获取哪个按钮被点击，也就是找到被点击按钮的索引值
            iNow=index;
            ul.animate({
                "left":-oneWidth*iNow,   //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNow确定
            })
        });
        /*手动点击按钮进行图片轮播代码结束*/
        
        
        /*定时自动轮播图片代码开始*/
        function autoPlay(){
            timer=setInterval(function(){        //打开定时器
            iNow++;                          //让图片的索引值次序加1，这样就可以实现顺序轮播图片
            if(iNow>showNumber.length-1){    //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
                iNow=0;
            }
            showNumber.eq(iNow).trigger("click");    //模拟触发数字按钮的click
            },2000);   //2000为轮播的时间
        }
        autoPlay();
        /*定时自动轮播图片代码结束*/
        
        /*鼠标悬浮图片停止轮播代码开始*/
        slideShow.hover(
            function(){
                clearInterval(timer);
            },autoPlay
        );
        /*鼠标悬浮图片停止轮播代码结束*/
})

我几乎已经编写了轮播图，基本上可以满足我明天的项目应用。如果有时间，我将改进轮播图的其他功能。周末比较好，您可以自由编写。

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-340731-1.html