【详细】手把手教你实现JavaScript轮播图功能

        轮播图见下图是移动端，网站上一种非常常见的展示效果，我们在各大app，网站都经常可以看到这种效果。用户可以用手来回选择展示的图片，无点击事件时，控件会依次循环展示图片。

那么本文今天就探究一下如何实现这类效果。

展示效果

技术流程

对于这个功能，作者梳理了一下实现流程
1. 需要有一个图片切换功能

2. 能够自动切换图片

3. 鼠标移动到轮播图上，不进行轮回播放，鼠标移动走进行轮回播放

 

图片切换函数的实现

function changePic (curIndex) {
       for (var i = 0; i < pic.length; ++i) {
             pic[i].style.display = "none";
             list[i].className = "";
           }
           pic[curIndex].style.display = "block";
           list[curIndex].className = "on";
       }
   };

遍历所有数组中所有图片，然后通过遍历展示切换图片，进而实现效果

 

自动切换图片

自动切换图片就需要让他能够在一定时间内自动调用切换函数

function autoPlay () {
                if (++index >= pic.length) index = 0;
                changePic(index);
            }

同时为了实现过一段时间切换下一张，需要进行时间限制

timer = setInterval(autoPlay, 5000);

 

鼠标悬停控制

鼠标划过整个容器时停止自动播放

wrap.onmouseover = function () 
{      
    clearInterval(timer);
}

鼠标离开整个容器时继续播放至下一张，设置轮播间隔为5000毫秒（5s）

wrap.onmouseout = function () 
{
     timer = setInterval(autoPlay, 5000);
}

html文件引入需要轮播的图片

    

        

        

        

        

        

    
    

        
1
        
2
        
3
        
4
        
5
    

 css决定轮播图的样式

 完整代码与演示

    
    
    
    



    

        

        

        

        

        

    
    

        
1
        
2
        
3
        
4
        
5
    

喜欢的朋友点赞收藏啦