简单的轮播图

这两天突然想弄个轮播图，根据网上各位大佬的方法，自己整理了以下方法，记录下来，以防忘记；

https://www.cnblogs.com/LIUYANZUO/p/5679753.html这个链接就是我参考的大佬的方法，但是有些我不太理解，所以做了改动；

Html布局

    首先父容器container存放所有内容，子容器list存在图片。子容器buttons存放按钮小圆点。

<div id="container">
    <div id="list">
        <img class="lunbo lunbo_1" src="yueliang.jpg" alt="1" style="display: block;"/>
        <img class=" lunbo lunbo_2" src="pujing.jpg" alt="2"/>
        <img class="lunbo lunbo_3" src="aiqing.jpg" alt="3"/>
        <img class="lunbo lunbo_4" src="huoying.jpg" alt="4"/>
        <img class="lunbo lunbo_5" src="timg.jpg" alt="5"/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

这是html页面，src里面的图片是我自己随便找的，img里的class前边的lunbo是为了控制样式的，后边那个lunbo_（12345）这个是后边用来控制图片显示或者隐藏的。

CSS修饰

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body {
    padding: 20px;
}
.lunbo {
    width: 600px;
    height: 400px;
    display: none;
}

#container {
    position: relative;
    width: 600px;
    border: 3px solid #333;
    overflow: hidden;
}


#list img {
    float: left;
    width: 600px;
    height: 400px;
}

#buttons {
    position: absolute;
    left: 250px;
    bottom: 20px;
    z-index: 2;
    height: 10px;
    width: 100px;
}

#buttons span {
    float: left;
    margin-right: 5px;
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
}

#buttons .on {
    background: orangered;
}

.arrow {
    position: absolute;
    top: 180px;
    z-index: 2;
    display: none;
    width: 40px;
    height: 40px;
    font-size: 36px;
    font-weight: bold;
    line-height: 39px;
    text-align: center;
    color: #fff;
    background-color: RGBA(0, 0, 0, .3);
    cursor: pointer;
}

.arrow:hover {
    background-color: RGBA(0, 0, 0, .7);
}

#container:hover .arrow {
    display: block;
}

#prev {
    left: 20px;
}

#next {
    right: 20px;
}

Js

首先我们先实现出手动点击左右两个箭头切换图片的效果：

window.onload = function () {
        var list = document.getElementById('list');
        var prev = document.getElementById('prev');
        var next = document.getElementById('next');


        /**点击左右的箭头*/
        function animate(obj) {
            var number = 1;
            var k = 0;
            //获取当前图片的序号，然后序号给序号+1的图片显示，其余的隐藏
            $(".lunbo").each(function () {
                k++;
                var a = $(this).css("display");
//                alert(a);
                if (a == 'block') {
                    number = $(this).attr("alt");
                    $(this).css("display", "none");
                }
            });

            if (obj == 1) {
                number = parseInt(number) + 1;
            } else {
                number = parseInt(number) - 1;
            }
//            alert(number);
            if (number < 1) {
                number = k;
            }
            if (number > k) {
                number = 1;
            }
            $(".lunbo_" + number).css("display", "block");
        }
        prev.onclick = function () {
            animate(2);
        };
        next.onclick = function () {
            animate(1);
        };

    };

上面的js就实现了点击红圈里面的箭头，切换图片的功能；

大体的思路是，点击后，获取当前display属性为block的图片的数字，然后让这个数字“+”或者“-”1，然后让对应这个新数的图片显示，之前的隐藏；方法里传的参数1代表点击右边的箭头，2代表点击左边的箭头；

 

接下来，

轮播图，顾名思义，是自己会动的图片，这个时候我们需要用到浏览器的内置对象定时器。

对于定时器，有必要说明一下setInterval()跟setTimeout的区别了。简单来说，setInterval()执行多次，setTimeout()只执行一次。

更具体的用法可以点击链接查看区别：window.setInterval  window.setTimeout 。

这里我们是用setInterval()，因为我们的图片需要循环滚动。插入下面

/**图片隔段时间自动轮播*/
        var timer;
        function play() {
            timer = setInterval(function () {
                next.onclick();
            }, 1500);
        }
        play();

这样图片就能自动的一张一张切换；

 

之后

如果我发现一张图片贼顺眼，我想多瞅两眼呢，这就需要下面的代码了；

/**鼠标放到图片上后会停止轮播，离开重新开始轮播*/
        var container = document.getElementById('container');
        function stop() {
            clearInterval(timer);
        }
        container.onmouseover = stop;
        container.onmouseout = play;

这个就是鼠标放在图片上，图片就不会自动轮播了，鼠标离开图片之后，重新开始轮播；

 

倒数第二

就是下面那一排的小圆点了，图片跑哪，小圆点就跑哪；

/**小圆点跟着图片跑*/
        var buttons = document.getElementById('buttons').getElementsByTagName('span');
        var index = 1;

        function buttonsShow() {
            //这里需要清除之前的样式
            for (var i = 0; i < buttons.length; i++) {
                if (buttons[i].className == 'on') {
                    buttons[i].className = '';
                }
            }
            //数组从0开始，故index需要-1
            buttons[index - 1].className = 'on';
        }

        prev.onclick = function () {
            index -= 1;
            if (index < 1) {
                index = 5;
            }
            buttonsShow();
            animate(2);
        };
        next.onclick = function () {
            //由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
            index += 1;
            if (index > 5) {
                index = 1;
            }
            buttonsShow();
            animate(1);
        };

 

最后

小圆点很不忿，为啥我要跟着图片跑，不能让图片跟我走。好吧，你说啥就是啥，我给你加上这功能总行了吧！

for (var i = 0; i < buttons.length; i++) {
                // 这里使用的是立即执行函数，
                (function(i) {
                    buttons[i].onclick = function() {
                        var clickIndex = parseInt(this.getAttribute('index'));
//                        var offset = 600 * (index - clickIndex); 
//                        animate(offset);
                        $(".lunbo").css("display","none");
                        $(".lunbo_"+clickIndex).css("display","block");
                        index = clickIndex;
                        buttonsShow();
                    };
                })(i);
            }

这里涉及到闭包，老实说我现在连闭包是啥我都不知道，这个是根据我参考的那个大佬改编的方法，至于闭包......enmmmmm

好了这就大功告成了！！！！