轮播图

　　轮播图对于我们来说是最常见不过的了，我们在各种商品和企业网站中都能看见它的身影，具有很强的实用性，所以掌握一些简单轮播图的制作方法还是很有必要的，今天就和大家分享一下常见的两种简单轮播图的制作方法，可以以此为基础，添加更多的特效和行为，让你的页面布局更加的美观和具有吸引力。

 // 方法一原理介绍：利用大的图片盒子，将所有图片包裹在其中，如图示，每次点击对应的左右按钮，使图片盒子 向左或者向右移动对应图片宽度
　　　　乘以索引的距离，从而实现对应的效果。本文采用面向对象的方式，将功能拆分处理介绍（下面为js部分的代码，HTML和css部分可自行设置），这样使得思路更加明确，便于读者的理解：
　　
    function Banner(){
        // 选择标签，添加元素到js上
        this.left = document.getElementById("left")   //左按钮
        this.right = document.getElementById("right")   //右按钮
        this.imgbox = document.querySelector(".imgbox")   //图片盒子
        this.img = this.imgbox.children;    //图片集合
        // 设置图片盒子的宽度
        this.imgbox.style.width = this.img.length * this.img[0].offsetWidth + "px";
        // 添加索引，确定点击位移的距离
        this.index = 0;
        this.init()
    }
    // 设置左右按钮的点击功能，利用传参，优化代码。
    Banner.prototype.init = function(){
        var that = this;
        this.left.onclick = function(){
            that.changeIndex(1)
        }
        this.right.onclick = function(){
            that.changeIndex(-1)
        }
    }
    Banner.prototype.changeIndex = function(type){
        // 通过判断传入的参数来确定点击按钮的左右，当前判断true为左按钮。
        if(type == 1){
            // 判断点击左按钮是当前图片是否为图片的第一张，以此来确定下一张应该弹出来的图片。
            if(this.index == 0){
                // 判断为true，则下一张弹出图片应为倒数第二张
                this.index = this.img.length-2;
                // 为避免图片转换过程会出现其他图片，设置图片盒子left为倒数第二张图片的距离，再加上有倒数第一张图片的过渡，这样可以实现完美转换。
                this.imgbox.style.left = -(this.img.length-1) * this.img[0].offsetWidth + "px";
            }else{
                this.index--;
            }
        }else{
            // 当为右按钮时，思路与左按钮调换过来就可以了。
            if(this.index == this.img.length-1){
                this.index = 1;
                this.imgbox.style.left = 0;
            }else{
                this.index++
            }
        }
        this.display();
    }
    // 实现图片的切换功能
    Banner.prototype.display = function(){
        // 调用封装的move函数来切换图片，使得图片转换过程有一个缓冲的效果。
        move(this.imgbox,{
            left:-this.index * this.img[0].offsetWidth
        })
    }
    // 运行
    new Banner();

<script>
    // 方法二原理介绍：利用定位原理，将图片盒子大小设置为一个图片的大小，定位过的图片重叠在一起，初始让图片都定位在图片盒子右边，
　　　　　　第一张图片定位在盒子里面，通过触发对应的点击事件，来使相应的图片进行左右的位移，从而实现，点击轮播图片的效果。如下图：
　　  　　

    function Banner(){
        this.left = document.getElementById("left")
        this.right = document.getElementById("right")
        this.imgbox = document.querySelector(".imgbox")
        this.img = this.imgbox.children;
        // 与上一种方法不同的是，这次我们设置的索引有两个，第一个为准备离开的图片的索引，第二个为将要进来的图片的索引
        // 将要离开的图片的索引
        this.index = 0;
        // 将要进来的图片的索引
        this.iPrev = this.img.length - 1;
        // 执行点击事件
        this.init()
    }
    Banner.prototype.init = function(){
        // 同方法一利用传参优化代码
        var that = this;
        this.left.onclick = function(){
            that.changeIndex(-1)
        }
        this.right.onclick = function(){
            that.changeIndex(1)
        }
    }
    Banner.prototype.changeIndex = function(type){
        if(type == -1){
            // 此时判断传入参数，执行右点击事件，再判断此时将要离开的图片是否为 初始图片
            if(this.index == 0){
                // 返回为true，则下次将要进来的图片为最后一张，即对应下标为img.length-1，将要离开的图片的下标为0；
                this.index = this.img.length-1;
                this.iPrev = 0;
            }else{
                // 否则就进行下标减减的运算
                this.index--;
                this.iPrev = this.index+1;
            }
        }else{
            // 右点击事件与左点击事件思路相同，不过索引加减反过来
            if(this.index == this.img.length-1){
                // 当判断将要离开的图片的下标为最后一张时，下标为img.length-1 ，下一张准备进来的图片应该为第一张，即图片下标为0；
                this.index = 0;
                this.iPrev = this.img.length-1
            }else{
                // 否则就进行下标加加的运算
                this.index++;
                this.iPrev = this.index-1;
            }
        }
        // 判断完毕，执行换图函数，这里的type为display方向的判断参数，利用左右按钮传入type参数的正负，实现左右点击时图片切换离开的方向相对应。
        this.display(type);
    }
    Banner.prototype.display = function(type){
        //根据要走的和要进来的索引，实现图片的点击切换
        // 设置准备离开的图片的定位距离left为0；
        this.img[this.iPrev].style.left = 0;
        // 利用move封装函数缓冲移动到左端或者右端
        move(this.img[this.iPrev],{left:-this.img[0].offsetWidth * type})
        // 设置准备进来的图片的定位距离left为一个图片的宽度
        this.img[this.index].style.left = this.img[0].offsetWidth * type + "px";
        // 利用move封装函数实现图片进入图片盒子的缓冲效果；
        move(this.img[this.index],{left:0})
    }

    new Banner();

　　上面两种方法就是一般点击事件轮播图的设计方法了，可以给感兴趣的朋友参考一下，其中调用的封装函数move函数会在下次空闲分享给大家，欢迎留言指正及提问。