Code:
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>js轮播图</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,ol {
list-style: none;
}
#main {
width: %100;
height: 500px;
background-color: rgba(0,0,0,0.5);
margin: 20px auto 0;
border: 1px solid red;
position: relative;
}
#out {
width: 1000px;
margin: 0 auto;
background-color: aquamarine;
height: 500px;
overflow: hidden;
}
#con {
width: 5000px;
height: 500px;
}
#con img {
width: 1000px;
height: 500px;
float: left;
}
#nav {
overflow: hidden;
position: absolute;
bottom: 5px;
left: 600px;
}
#nav li {
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
background: #ccc;
font-size: 16px;
border-radius: 9px;
color: green;
margin: 0 5px;
float: left;
cursor: pointer;
}
#nav .select {
background: red;
color: #fff;
}
.btn {
position: absolute;
top: 50%;
width: 60px;
height: 60px;
border-radius: 50%;
margin-top: -25px;
background-color: rgba(0, 0, 0, .7);
color: #FFFFFF;
text-align: center;
line-height: 54px;
font-size: 60px;
cursor: pointer;
}
.left {
left: 0;
}
.right {
right: 0;
}
</style>
<script>
window.onload = function() {
var oOut = document.getElementById("out");
var oleft = document.getElementById("left");
var oright = document.getElementById("right");
var aLi = document.getElementsByTagName("li");
var aImgs = document.getElementsByTagName("img");
var imgW = aImgs[0].width;
var timer = null;
var x=0;
run();
function run() {
oOut.scrollLeft = 0;
aLi[0].setAttribute("class","select");
timer = setInterval(function() {
var i = oOut.scrollLeft/imgW + 1;
x=i;
if(i!=5) aLi[i].setAttribute("class","select");
if(i==0) aLi[4].setAttribute("class","");
else aLi[i-1].setAttribute("class","");
if (oOut.scrollLeft >= aImgs[0].width * 4) {
clearTimeout(timer);
run();
return;
}
oOut.scrollLeft+=imgW;
}, 1000)
}
oleft.onclick = function() {
for(var i=0;i<5;i++) aLi[x].setAttribute("class","");
x--;
if (x < 0) {
x = 0;
aLi[0].setAttribute("class","select");
} else {
oOut.scrollLeft -= aImgs[0].width;
aLi[x].setAttribute("class","select");
}
}
oright.onclick = function() {
for(var i=0;i<5;i++) aLi[x].setAttribute("class","");
x++;
if (x >= 5) {
x = 4;
aLi[4].setAttribute("class","select");
} else {
oOut.scrollLeft += aImgs[0].width;
aLi[x].setAttribute("class","select");
}
}
function Click(i){
var z = oOut.scrollLeft/imgW;
aLi[z].setAttribute("class","");
x = i;
oOut.scrollLeft = i*imgW;
aLi[i].setAttribute("class","select");
}
aLi[0].onclick = function() {
Click(0);
}
aLi[1].onclick = function() {
Click(1);
}
aLi[2].onclick = function() {
Click(2);
}
aLi[3].onclick = function() {
Click(3);
}
aLi[4].onclick = function() {
Click(4);
}
}
</script>
</head>
<body>
<div id="main">
<div id="out">
<div id="con">
<img src="img/01.jpg">
<img src="img/02.jpg">
<img src="img/03.jpg">
<img src="img/04.jpg">
<img src="img/05.jpg">
</div>
<ul id="nav">
<li class="select">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div id="left" class="btn left"> < </div>
<div id="right" class="btn right"> > </div>
</div>
</div>
</body>
</html>
