焦点图问题,为什么到第一张到第二张好使,往后就不好使了呢...求大神解答-慕课网

焦点图问题,为什么到第一张到第二张好使,往后就不好使了呢...求大神解答

来源：3-1 箭头切换

fluent

2015-08-11 07:47

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>焦点轮播图</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}
body {
    padding: 20px;
}
#container {
    width: 600px;
    height: 400px;
    overflow: hidden;
    position: relative;
}
#list {
    width: 3000px;
    height: 400px;
    position: absolute;
    z-index: 1;
}
#list img {
    float: left;
}
#buttons {
    position: absolute;
    height: 10px;
    width: 100px;
    z-index: 2;
    bottom: 20px;
    left: 250px;
}
#buttons span {
    cursor: pointer;
    float: left;
    border: 1px solid #fff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #333;
    margin-right: 5px;
}
#buttons .on {
    background: #ff4509;
}
.arrow {
    cursor: pointer;
    display: none;
    line-height: 39px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 2;
    top: 180px;
    background-color: rgba(0, 0, 0, .3);
    color: #fff;
}
.arrow:hover {
    background-color: rgba(0, 0, 0, .7);
}
#container:hover .arrow {
    display: block;
}
#prev {
    left: 20px;
}
#next {
    right: 20px;
}
</style>
<script type="text/javascript">
        function slidePic() {
            left = list.offsetLeft;
            var timer = setInterval(function() {
                if (left-list.offsetLeft == 600) {
                    clearInterval(timer);
                }
                else {
                    list.style.left = list.offsetLeft + (-10) + "px";
                }
            }, 30);
        }
        window.onload = function() {
                var container = document.getElementById('container');
                var list = document.getElementById('list');
                var buttons = document.getElementById('buttons').getElementsByTagName('span');
                var prev = document.getElementById('prev');
                var next = document.getElementById('next');
                var index = 1;
                var len = 5;
                var animated = false;
                var interval = 3000;
                var j = 1;
                for (j = 1; j <= len; j++) {
                       var timer1 = setTimeout(function() {
                            slidePic();
                        },3000);
                    }
        }

    </script>
</head>
<body>

<div id="container">
    <div id="list">
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.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"><</a>
    <a href="javascript:;" id="next" class="arrow">></a>
</div>

</body>
</html>