HTML+CSS+JavaScript：轮播图的自动播放、手动播放、鼠标悬停暂停播放

一、需求

昨天我们做了轮播图的自动播放，即每隔一秒自动切换一次

今天我们增加两个需求：

1、鼠标点击向右按钮，轮播图往后切换一次；鼠标点击向左按钮，轮播图往前切换一次

2、鼠标悬停在轮播图区域中时，轮播图暂停播放

 

二、代码素材

以下是缺失JS部分的代码，感兴趣的小伙伴可以先自己试着写一写

 

    
    
    
    
    

 

    

        

            
        
        

            
对人类来说会不会太超前了？
            

                

                

                

                

                

                

                

                

            
            

                <
                >
            
        
    
    

 

三、算法思路

1、将代码素材在浏览器中打开，并按F12进入开发者模式，分析各个HTML标签在轮播图中的位置及作用

2、划分业务模块：

        2.1.  模块一：自动播放模块

        2.2.  模块二：手动播放模块

        2.3.  模块三：鼠标悬停暂停播放模块

3、由于三个模块都与轮播图的播放有关，所以我们可以封装一个函数，实现轮播图的渲染

4、手动播放模块：分别为两个按钮添加鼠标点击事件，计数器 i 配合渲染函数实现手动播放下一张与手动播放上一张

 5、自动播放模块：利用间歇函数实现一秒切换一次的功能，间歇函数中调用手动播放下一张模块中的鼠标点击事件实现轮播图的顺序播放

6、鼠标悬停暂停播放模块：注册光标进入事件，光标进入，终止定时器；注册光标离开事件，光标离开，开启定时器

四、完整代码

  
  
  
  
  



  

    

      
    
    

      
对人类来说会不会太超前了？
      

        

        

        

        

        

        

        

        

      
      

        <
        >