原生js轮播图

1、先进行文档的布局

<div id="div-wrap" class="container">
    <!--为了不处理obj.style.left兼容性把写了行内样式因为obj.style.left不能直接获取外部属性-->
    <ul id="ul" class="oUl" style="left: -960px">
        <li><img src="img/banner-1.jpg" alt="1"></li>
        <li><img src="img/banner-1.jpg" alt="1"></li>
        <li><img src="img/banner-2.jpg" alt="2"></li>
        <li><img src="img/banner-3.jpg" alt="3"></li>
        <li><img src="img/banner-4.jpg" alt="4"></li>
        <li><img src="img/banner-5.jpg" alt="5"></li>
        <li><img src="img/banner-5.jpg" alt="5"></li>
    </ul>
    <!--左右两个点击切换图片的箭头-->
    <a href="javascript:;" id="pre" class="arrow"><</a>
    <a href="javascript:;" id="next" class="arrow">></a>
    <div id="buttons" class="oSpan">
        <!--添加自定义属性方便获取到属性值-->
        <span inde="1" class="on">1</span>
        <span inde="2">2</span>
        <span inde="3">3</span>
        <span inde="4">4</span>
        <span inde="5">5</span>
    </div>
</div>

2、样式的编写为了方便引入了一个reset

http://linxz.github.io/tianyizone/css_reset.html

 .container {
        width: 960px;
        height: 540px;
        position: relative;
        overflow: hidden;
    }

    .oUl {
        width: 5760px;
        position: absolute;
    }

    .oUl li {
        float: left;
    }

    .arrow {
        height: 50px;
        width: 50px;
        position: absolute;
        z-index: 2;
        background: grey;
        opacity: 0.5;
        font-size: 30px;
        font-weight: bold;
        top: 50%;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        display: none;
    }

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

    #pre {
        left: 0px;
    }

    #next {
        right: 0px;
    }

    .oSpan {
        position: absolute;
        left: 40%;
        bottom: 2%;
    }

    .oSpan span {
        float: left;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        margin-left: 10px;
        color: white;
        cursor: pointer;
    }

    .on {
        background: red;
    }

3、获取元素

 var container = document.getElementById("div-wrap");
    var oUl = document.getElementById("ul");
    var pre = document.getElementById("pre");
    var next = document.getElementById("next");
    var buttons = document.getElementsByTagName("span");
    var time = null, index = 1, newLeft = 0;

4、让图片动起来

 function animate(offset) {
        newLeft = parseInt(oUl.style.left) + offset;
//        console.log(newLeft);
        oUl.style.left = newLeft + "px";
        if (newLeft < -4800) {
            oUl.style.left = -960 + "px";
        }
        if (newLeft > -960) {
            oUl.style.left = -4800 + "px";
        }
    }

    pre.onclick = function () {
        animate(-960);
    };
    next.onclick = function () {
        animate(960);
    };
    function play() {
        time = setInterval(function () {
            pre.onclick();
        }, 1000)
    }
    play();
    function stop() {
        clearInterval(time);
    }
    container.onmouseover = stop;
    container.onmouseout = play;

5、先处理底部的数字使图片滚动改变相应的背景色、然后点击对应的数字显示对应的图片

 function btnShow() {
//        console.log(buttons.length)
        for (var i = 0, len = buttons.length; i < len; i++) {
            console.log(len);
//        先进行默认背景的清除
            if (buttons[i].className = "on") {
                buttons[i].className = "";
//                console.log("te");
            }
//        然后进行添加样式(取轮播图滚动时的图片的位置进行设置)使下标相对应
            buttons[index - 1].className = "on";
//            var ind=parseInt(newLeft/-960);
//            buttons[ind].className = "on";

            pre.onclick = function () {
                index += 1;
                if (index > 5) {
                    index = 1;
                }
                btnShow();
                animate(-960);
            };
            next.onclick = function () {
                index -= 1;
                if (index < 1) {
                    index = 5;
                }
                btnShow();
                animate(960);
            };
            for (var j = 0; j < len; j++) {
//                需要得到span的自定义属性获取属性然后设置偏移量
                //需要写成立即执行函数
//                buttons[j].onclick=(function () {
//                    console.log(j);//
//                })();
                (function (j) {
                    buttons[j].onclick = function () {
//                        console.log(j);//点击一次打印对应的下标
                        var spanIndex = buttons[j].getAttribute("inde");
                        console.log(index);
//                        console.log(oUl.offsetWidth);
                        var offset = (spanIndex - index) * -960;
                        animate(offset);
                        index = spanIndex;
                        btnShow();
                    }
                })(j);
            }
        }
    }
    btnShow();