JS实现无限轮播无倒退效果

本文实例为大家分享了JS实现无限轮播无倒退的具体代码，供大家参考，具体内容如下

原理：每次移动前设置transition过渡效果，完成清除过渡效果，然后在到达最后一张图片的时候在清除过渡效果之后translateX（0）

另外需要jq的引用

HTML：

CSS：

.slide-container {
   max-width: 1230px;
   margin: auto;
   overflow: hidden;
  }
  .slide-container li {
   float: left;
  }
  .slide-container img {
   width: 100%;
  }

JS:

第一步我们应该在ul的所有li前面和后面复制一份一摸一样的li数组。

效果图：                                                                       

微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
下一篇：JavaScript实现多层颜色选项卡嵌套