为什么要复制那么多图片很复杂
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>焦点轮播</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-decoration: none;
}
#container {
width: 600px;
height: 400px;
border: 3px solid #333;
margin: 20px auto;
position: relative;
}
#list {
width: 3600px;
height: 400px;
position: absolute;
left: 10px;
}
#list img {
width: 600px;
float: left;
}
#button {
position: absolute;
left: 250px;
bottom: 20px;
/*z-index: 2;*/
}
#button span {
display: inline-block;
width: 10px;
height: 10px;
background-color: #333333;
border-radius: 10px;
border: 1px solid #FFF;
margin-left: 5px;
cursor: pointer;
}
#button .on {
background-color: #FF4500;
}
.arrow {
position: absolute;
width: 40px;
height: 40px;
font-size: 36px;
font-weight: bold;
text-align: center;
background-color: #000;
opacity: 0.3;
color: #FFF;
top: 180px;
cursor: pointer;
}
.arrow:hover {
opacity: 0.7;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left:0px;">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
</div>
<div id="button">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="prev"><</div>
<div id="next">></div>
</div>
<script type="text/javascript">
var container = document.getElementById('container');
var list = document.getElementById('list');
var buttons = document.getElementById('button').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 0;
var timer = null;
next.onclick = function() {
changePic(-600);
index++;
if (index >= buttons.length) {
index = 0;
}
if (index < 0) {
index = buttons.length - 1;
}
showButton();
}
prev.onclick = function() {
changePic(600);
index--;
if (index >= buttons.length) {
index = 0;
}
if (index < 0) {
index = buttons.length - 1;
}
showButton();
}
for (var j = 0; j < buttons.length; j++) {
buttons[j].id = j;
buttons[j].onclick = function() {
pianyi = (this.id - index) * -600;
changePic(pianyi);
index = this.id;
showButton();
}
}
function changePic(offset) {
var left = parseInt(list.style.left) + offset;
var speed = offset / 30
function go() {
if ((speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go, inteval);
} else {
list.style.left = left + "px";
if (left < -2400) {
list.style.left = 0 + "px";
}
if (left > 0) {
list.style.left = -2400 + "px";
}
}
}
go();
}
function showButton() {
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].className == "on") {
buttons[i].className = "";
break;
}
}
buttons[index].className = "on";
}
</script>
</body>
</html>
