js实现轮播图

目标效果（点击两边按钮切换图片）

demo.gif

涉及知识

1.html
2.JavaScript
3.css

准备素材

a.jpg、b.jpg、c.jpg、d.jpg、left.png、right.png
index.html、script.js、style.css

思路

（1）html：显示静态图片及两个图标按钮；
（2）js：新建数组，将图片名放入-->获取左右图标，添加点击事件
-->处理好切换到边界时的下标；
（3）css：把组件的位置处理一下。

index.html

script.js

  var text = document.getElementById("show");

    var img = document.getElementById("img");
    var spans = document.getElementsByTagName("span");
    var images = ["a.jpg", "b.jpg", "c.jpg", "d.jpg"];
    var left = spans[0];
    var right = spans[1];
    var index = 0;
    left.onclick = function () {
        if (index == 0) {
            index = images.length;
        }
        index--;
        img.src = images[index];
        show.value = index;
    }
    right.onclick = function () {
        if (index == images.length - 1) {
            index = -1;
        }
        index++;
        img.src = images[index];
        show.value = index;
    }

style.css

  /*body清零*/
        body {
            margin: 0;
            padding: 0;
        }

        /*面向所有组件的设置*/
        .all {
            width: 440px;
            height: 350px;
            margin: 10% auto;
            border: 1px silver dotted;
            background-color: rgba(229, 238, 204, .5);
        }
        /*图片显示区域*/
        .all > img {
            margin-left: 20px;
            margin-top: 20px;
            width: 400px;
            height: 300px;
        }
        /*左右切换图标*/
        .all > span > img {
            width: 40px;
            height: 80px;
            opacity: 0.7;
            filter: alpha(opacity=70); /* IE8 及其更早版本 */
        }
        /*向左图标*/
        .all .left {
            cursor: pointer;
            position: relative;
            left: 18px;
            top: -197px;
        }
        /*向右图标*/
        .all .right {
            cursor: pointer;
            position: relative;
            left: 335px;
            top: -199px;
        }