用原生JS写的轮播效果，怎么让它有滑动的效果，不是直接切换

JavaScript015

用原生JS写的轮播效果，怎么让它有滑动的效果，不是直接切换,第1张

如果是朝左翻页，就把当前页朝左偏移100%的宽度，让下一页同样朝左偏移100%宽度。以下是代码部分：

<html><head lang="en"><meta charset="UTF-8"><title></title><style>.banner{ width:300pxheight:250pxposition: relativez-index: 100background: skybluemargin:100px autooverflow:hidden } .banner .first{ left:0} .banner a{ width: 100%height: 100%position: absolutedisplay:blocktop:0left:100%} .banner a img{ width: 100%height: 100%} .banner .pre{ position: absoluteleft:0top:120pxbackground: graywidth:30pxheight:30pxborder-radius: 30pxline-height: 30pxtext-align: centeropacity: 0.4z-index: 1000cursor: pointer} .banner .next{ position: absoluteright:0top:120pxbackground: graywidth:30pxheight:30pxborder-radius: 30pxline-height: 30pxtext-align: centeropacity: 0.4z-index: 1000cursor: pointer} .

曾经插件不太流行我就自己写，这个问题我来回答你，原生你需要对CSS跟JS都比较熟练，才能去制作，先用CSS排版出你需要的界面，之后才能去写JS。

JS部分你要取出你的轮播图个数，然后定义一个切换到单前的变量，再定义切换效果，切到最后一张图片了要如何处理，切换都第一张用户点击上一站又要如何处理。当你这些都处理好了之后，一个页面多个轮播等等，JS兼容页面兼容又得处理吧，我就问你头痛不。

现在使用框架这些通通都不用自己管，高效轻松他不好吗？

思路一 绝对定位+透明度

HTML示例代码

CSS示例代码

JS示例代码

思路二 绝对定位+left

HTML示例代码

CSS示例代码

JS示例代码

思路三 绝对定位+left+DOM操作

HTML示例代码

CSS示例代码

JS示例代码

思路一 绝对定位+透明度

原理：首先，将所有轮播图以绝对定位的方式定位父元素的相同位置；接着，实现上下键按钮修改active的下标；最后，将所有图片透明度重置为0，而被激活的图片透明度设置为1；

优点：实现最为简单，代码量小，图片过渡自然；

缺点：没有左右滑动效果

HTML示例代码

<div id='container'> <ul id='img-list'> <li><img src=''/></li> <li><img src=''/></li> <li><img src=''/></li> <li><img src=''/></li> </ul> <a id='pre-btn'><span></span></a> <a id='next-btn'><span></span></a></div>

1

2

3

4

5

6

7

8

9

10

CSS示例代码