JS&CSS实现轮播图效果

轮播图有两种效果，一种是 改变图片的背景图，与京东首页轮播图效果类似；另一种是 利用定位改变图片的左偏移量，实现滑动效果，与淘宝首页轮播图效果类似。

CSS实现

css实现轮播图的效果不全面，只能实现图片的切换，点击指示点或下一张等指示箭头的 *** 作需要在js中实现，但css实现轮播图的优势在于使用动画，逻辑简单

背景图切换轮播图

移动左偏移切换轮播图

JS实现

js实现轮播图的切换，实现的功能更全面，建议理解其原理。

背景图切换轮播图

    
    
    
    
    



    
        
            < 
                 > 

                
                    
                    
                    
                    
                
        

移动左偏移切换轮播图

    
    
    
    
    



    
        
            
            
            
            
            
            
        
        
            < 
                 > 
                
                    
                    
                    
                    
                
        

利用swiper制作 轮播图

swiper里有许多轮播图的样式，学会使用swiper可以使代码变得更简洁、高效。

官网：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

1. 下载swiper

 2. 寻找合适的轮播图样式

 3. 用编辑器打开对应文件，进行修改

 

 

 虽然 swiper功能强大，但希望大家能掌握轮播图的原理。