<!DOCTYPE?html><html><head><meta charset="UTF-8"><title>焦點(diǎn)輪播圖</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>
焦點(diǎn)圖問題,為什么到第一張到第二張好使,往后就不好使了呢...求大神解答
fluent
2015-08-11 07:43:09
