為什么要復制那么多圖片很復雜
<!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>
