<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示例代码
