js写轮播图,逐步完善

目录

1、自动轮播

2、点击更换

 3、自动播放加左右箭头点击切换

4、完整版轮播图


1、自动轮播

用定时器setInterval()来写,可以实现自动播放





    
    
    
    轮播图点击切换
    



    

2、点击更换

点击那个小圆点就跳到对应位置





  
  
  
  轮播图点击切换
  



  

 3、自动播放加左右箭头点击切换

需求:要自动播放

        点击左右按钮可以跳转

        鼠标移入停止自动播放,鼠标离开继续自动播放

思路:

        需要开启定时器来实现自动播放

        给左右按钮添加点击事件

        给整体添加鼠标移入清除定时器功能

        鼠标移出添加开启定时器功能  





    
    
    
    轮播图点击切换
    



    

优化代码:把重复的代码封装成一个为toggle() 的函数,哪里需要,哪里调用,减少代码冗余



  
    
    
    
    轮播图点击切换
    
  

  
    

4、完整版轮播图

结合以上所有功能,是一个综合





    
    
    
    轮播图点击切换
    



    

 

你可能感兴趣的:(js案例,javascript,css,css3,前端)