原生JS实现无缝轮播图

效果图：

其实左右还有两个箭头按钮可以切换图片，不过是鼠标移到轮播图那个区域才显示出来。点击下面的小圆点可以切换到相应的图片，有定时器可以自动轮播。

html： 要点：要给最前面添加最后一张图片作为附属图，在最后面添加第一张图片作为附属图，实现无缝轮播。给小圆点绑定一个自定义属性index用于标记当前index

 

    

      
      
      
      
      
    
 
    

      
      
      
    
      <
        >
   

css:

要点：里面的几张图片是通过div包起来，在给里面设置inline-block让它们可以在同一行也可以设置宽高，当然这里用ul li标签也是没问题的，然后通过position定位，设置div的left距离来实现轮播。