1.lunbo.html代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>大轮播</title><link rel="stylesheet" type="text/css" href="CSS/lunbo.css"/><script src="JS/lunbo.js" type="text/javascript"></script></head><body><div id="container"><div id="list" style="left: -1350px;"><img src="image/banner_3.jpg"/><img src="image/banner_1.jpg"/><img src="image/banner_2.jpg"/><img src="image/banner_3.jpg"><img src="image/banner_1.jpg"/></div><div id="buttons"><span index="1"></span><span index="2"></span><span index="3"></span></div><a href="javascript:;" id="prev" class="arrow" style="font-size:100px; text-align:center;"><</a><a href="javascript:;" id="next" class="arrow" style="font-size:100px; text-align:center;">></a></div></body></html>
2.CSS/lunbo.css代码：
body {margin: 0px;padding: 0px;width: 1350px;height: 618px;}a {text-decoration: none;}#container {width: 1350px;height: 618px;overflow: hidden;position: relative;border-top: 1px solid #ac6a0a;}#list {width: 6750px;height: 618px;position: absolute;z-index: 1;}#list img {float: left;width: 1350px;height: 618px;}#buttons {position: absolute;height: 20px;width: 60px;z-index: 2;bottom: 20px;left: 50%;}#buttons span {cursor: pointer;float: left;border: 1px solid #ad6a0a;width: 10px;height: 10px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;margin-right: 5px;}#buttons .on {background: orangered;}.arrow {cursor: pointer;display: none;line-height: 100px;text-align: center;width: 40px;height: 40px;position: absolute;z-index: 2;top: 180px;background-color: RGBA(0, 0, 0, 0);color: #fff;}.arrow:hover {background-color: RGBA(0, 0, 0, 0);}#container:hover .arrow {display: block;}#prev {left: 10px;color: #ffffff;}#next {right: 10px;color: #ffffff;}
3.JS/lunbo.js代码：
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 = 3;var animated = false;var interval = 3000;var timer;var size = 1350;function animate(offset) {if (offset == 0) {return;}animated = true;var time = 300;var inteval = 10;var speed = offset / (time / inteval);console.log("speed:" + speed);var left = parseInt(list.style.left) + offset;var go = function () {if ((speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {list.style.left = parseInt(list.style.left) + speed + 'px';console.log(list.style.left);setTimeout(go, inteval);} else {list.style.left = left + 'px';if (left > -200) {list.style.left = -size * len + 'px';}if (left < ( -size * len)) {list.style.left = '-' + size + 'px';}animated = false;console.log("left:" + list.style.left);}}go();}function showButton() {for (var i = 0; i < buttons.length; i++) {if (buttons[i].className == 'on') {buttons[i].className = '';break;}}buttons[index - 1].className = 'on';}function play() {timer = setTimeout(function () {next.onclick();play();},interval);}function stop() {clearTimeout(timer);}next.onclick = function () {if (animated) {return;}if (index == len) {index = 1;} else {index += 1;}animate(-size);showButton();}prev.onclick = function () {if (animated) {return;}if (index == 1) {index = len;} else {index -= 1;}animate(size);showButton();}for (var i = 0; i < buttons.length; i++) {buttons[i].onclick = function () {if (animated) {return;}if (this.className == 'on') {return;}var myIndex = parseInt(this.getAttribute('index'));var offset = -size * (myIndex - index);animate(offset);index = myIndex;showButton();}}container.onmouseover = stop;container.onmouseout = play;play();};
