轮播图对于我们来说是最常见不过的了，我们在各种商品和企业网站中都能看见它的身影，具有很强的实用性，所以掌握一些简单轮播图的制作方法还是很有必要的，今天就和大家分享一下常见的两种简单轮播图的制作方法，可以以此为基础，添加更多的特效和行为，让你的页面布局更加的美观和具有吸引力。
1 // 方法一原理介绍：利用大的图片盒子，将所有图片包裹在其中，如图示，每次点击对应的左右按钮，使图片盒子 向左或者向右移动对应图片宽度 乘以索引的距离，从而实现对应的效果。本文采用面向对象的方式，将功能拆分处理介绍（下面为js部分的代码，HTML和css部分可自行设置），这样使得思路更加明确，便于读者的理解：
2 function Banner(){
3 // 选择标签，添加元素到js上
4 this.left = document.getElementById("left") //左按钮
5 this.right = document.getElementById("right") //右按钮
6 this.imgbox = document.querySelector(".imgbox") //图片盒子
7 this.img = this.imgbox.children; //图片集合
8 // 设置图片盒子的宽度
9 this.imgbox.style.width = this.img.length * this.img[0].offsetWidth + "px";
10 // 添加索引，确定点击位移的距离
11 this.index = 0;
12 this.init()
13 }
14 // 设置左右按钮的点击功能，利用传参，优化代码。
15 Banner.prototype.init = function(){
16 var that = this;
17 this.left.onclick = function(){
18 that.changeIndex(1)
19 }
20 this.right.onclick = function(){
21 that.changeIndex(-1)
22 }
23 }
24 Banner.prototype.changeIndex = function(type){
25 // 通过判断传入的参数来确定点击按钮的左右，当前判断true为左按钮。
26 if(type == 1){
27 // 判断点击左按钮是当前图片是否为图片的第一张，以此来确定下一张应该弹出来的图片。
28 if(this.index == 0){
29 // 判断为true，则下一张弹出图片应为倒数第二张
30 this.index = this.img.length-2;
31 // 为避免图片转换过程会出现其他图片，设置图片盒子left为倒数第二张图片的距离，再加上有倒数第一张图片的过渡，这样可以实现完美转换。
32 this.imgbox.style.left = -(this.img.length-1) * this.img[0].offsetWidth + "px";
33 }else{
34 this.index--;
35 }
36 }else{
37 // 当为右按钮时，思路与左按钮调换过来就可以了。
38 if(this.index == this.img.length-1){
39 this.index = 1;
40 this.imgbox.style.left = 0;
41 }else{
42 this.index++
43 }
44 }
45 this.display();
46 }
47 // 实现图片的切换功能
48 Banner.prototype.display = function(){
49 // 调用封装的move函数来切换图片，使得图片转换过程有一个缓冲的效果。
50 move(this.imgbox,{
51 left:-this.index * this.img[0].offsetWidth
52 })
53 }
54 // 运行
55 new Banner();
1 <script>
2 // 方法二原理介绍：利用定位原理，将图片盒子大小设置为一个图片的大小，定位过的图片重叠在一起，初始让图片都定位在图片盒子右边， 第一张图片定位在盒子里面，通过触发对应的点击事件，来使相应的图片进行左右的位移，从而实现，点击轮播图片的效果。如下图：
3 function Banner(){
4 this.left = document.getElementById("left")
5 this.right = document.getElementById("right")
6 this.imgbox = document.querySelector(".imgbox")
7 this.img = this.imgbox.children;
8 // 与上一种方法不同的是，这次我们设置的索引有两个，第一个为准备离开的图片的索引，第二个为将要进来的图片的索引
9 // 将要离开的图片的索引
10 this.index = 0;
11 // 将要进来的图片的索引
12 this.iPrev = this.img.length - 1;
13 // 执行点击事件
14 this.init()
15 }
16 Banner.prototype.init = function(){
17 // 同方法一利用传参优化代码
18 var that = this;
19 this.left.onclick = function(){
20 that.changeIndex(-1)
21 }
22 this.right.onclick = function(){
23 that.changeIndex(1)
24 }
25 }
26 Banner.prototype.changeIndex = function(type){
27 if(type == -1){
28 // 此时判断传入参数，执行右点击事件，再判断此时将要离开的图片是否为 初始图片
29 if(this.index == 0){
30 // 返回为true，则下次将要进来的图片为最后一张，即对应下标为img.length-1，将要离开的图片的下标为0；
31 this.index = this.img.length-1;
32 this.iPrev = 0;
33 }else{
34 // 否则就进行下标减减的运算
35 this.index--;
36 this.iPrev = this.index+1;
37 }
38 }else{
39 // 右点击事件与左点击事件思路相同，不过索引加减反过来
40 if(this.index == this.img.length-1){
41 // 当判断将要离开的图片的下标为最后一张时，下标为img.length-1 ，下一张准备进来的图片应该为第一张，即图片下标为0；
42 this.index = 0;
43 this.iPrev = this.img.length-1
44 }else{
45 // 否则就进行下标加加的运算
46 this.index++;
47 this.iPrev = this.index-1;
48 }
49 }
50 // 判断完毕，执行换图函数，这里的type为display方向的判断参数，利用左右按钮传入type参数的正负，实现左右点击时图片切换离开的方向相对应。
51 this.display(type);
52 }
53 Banner.prototype.display = function(type){
54 //根据要走的和要进来的索引，实现图片的点击切换
55 // 设置准备离开的图片的定位距离left为0；
56 this.img[this.iPrev].style.left = 0;
57 // 利用move封装函数缓冲移动到左端或者右端
58 move(this.img[this.iPrev],{left:-this.img[0].offsetWidth * type})
59 // 设置准备进来的图片的定位距离left为一个图片的宽度
60 this.img[this.index].style.left = this.img[0].offsetWidth * type + "px";
61 // 利用move封装函数实现图片进入图片盒子的缓冲效果；
62 move(this.img[this.index],{left:0})
63 }
64
65 new Banner();
上面两种方法就是一般点击事件轮播图的设计方法了，可以给感兴趣的朋友参考一下，其中调用的封装函数move函数会在下次空闲分享给大家，欢迎留言指正及提问。