JS实现简单的图片切换效果

使用图片进行点击切换效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {margin:0; padding: 0}
        button {
            width: 50px;
        }
        p {
            text-align: center;
        }
        .active {
            background-color: yellow;
        }
        #wrap {
            width:510px;
            overflow: hidden;
            margin:0 auto;
        }
        #inner {
            width:9999px;
            overflow: hidden;
            position: relative;
            left:0;
            transition: left 0.6s;
        }
        #inner a {
            float: left;
        }
        #inner img {
            display: block;
            width:510px;
        }
    </style>

</head>
<body>
    
    <div id="wrap">
        <div id="inner">
            <a href="###"><img src="img/1.jpg"></a>
            <a href="###"><img src="img/2.jpg"></a>
            <a href="###"><img src="img/3.jpg"></a>
            <a href="###"><img src="img/4.jpg"></a>
            <a href="###"><img src="img/5.jpg"></a>
            <a href="###"><img src="img/6.jpg"></a>
            <a href="###"><img src="img/7.jpg"></a>
            <a href="###"><img src="img/8.jpg"></a>
        </div>
    </div>
    <p>
        <button class="active">1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>7</button>
        <button>8</button>
    </p>
    <script type="text/javascript">
    //1.找节点
    var buttonList = document.getElementsByTagName("button");
    var inner = document.getElementById("inner");
    //可见宽度
    var perWidth = inner.children[0].offsetWidth;
    //2.加事件
    // 1 ===> -510 * 0 px
    // 2 ===> -510 * 1 px
    // 3 ===> -510 * 2 px
    // 4 ===> -510 * 3 px
    // ...
    // 9 ===> -510 * 8 px
    // inner.style.left = ???? + "px";
    for(var i = 0; i < buttonList.length; i++) {
        buttonList[i].index = i;
        buttonList[i].onclick = function() {
            inner.style.left = -perWidth * this.index + "px";
            for(var j = 0; j < buttonList.length; j++) {
                buttonList[j].className = "";
            }
            this.className = "active";
        }
    }
    </script>
</body>
</html>

然后我想给它加个定时自动走的效果，代码如下：

<script type="text/javascript">
    //1.找节点
    var buttonList = document.getElementsByTagName("button");
    var inner = document.getElementById("inner");
    var perWidth = inner.children[0].offsetWidth;
    
    function tab() {
        inner.style.left = - perWidth * index + "px";
        for(var j = 0; j < buttonList.length; j++) {
            buttonList[j].className = "";
        }
        buttonList[index].className = "active";
    }
    for(var i = 0; i < buttonList.length; i++) {
        buttonList[i].index = i;
        buttonList[i].onclick = function() {
            index = this.index;
            tab();
        }
    }
    var index = 0;
    setInterval(function() {
        index ++;
        if(index > buttonList.length - 1) {
            index = 0;
        }
        tab();
    },5000);
    </script>