JavaScript编写的轮播

省略css样式

<div id="box">
    <img src="images/1.jpg" alt="" id="pic1">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
<script>
    var btn = document.getElementsByTagName("li");
    var pic1 = document.getElementById("pic1");
    console.log(btn);
    //根据当前的index值来改变img scr 路径
    //setAttribute（"index",1）
    for(var i=0;i<btn.length;i++){
        btn[i].setAttribute("index",i+1);
        btn[i].onclick = function () {
            var index = this.getAttribute("index");
            var str = "images/"+index+".jpg";
            pic1.setAttribute("src",str);
        }
    }
    var j = 0;

    var timer = setInterval(function () {
        j = j+1;
        pic1.src = "images/"+j+".jpg";
        if(j===6){
            j=0;
        }
    },2000)

</script>