JS实现无限轮播无倒退效果-自学php网

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

来源：自学PHP网时间：2020-09-22 14:44 作者：小飞侠阅读:次

[导读] JS实现无限轮播无倒退效果...

今天带来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实现多层颜色选项卡嵌套

子栏目

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

最新评论

添加评论

更多文章推荐

添加评论