<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播</title>
<style type="text/css">
.lb {
300px;
height: 200px;
margin: 10px auto;
}
#left-arrow {
position: relative;
display: inline-block;
top: -130px;
left: -10px;
z-index: 999;
cursor: pointer;
}
#right-arrow {
position: relative;
display: inline-block;
top: -130px;
right: -215px;
z-index: 999;
cursor: pointer;
}
#num-btn span {
display: inline-block;
font-size: 20px;
23.2px;
font-family: arial;
text-align: center;
border-radius: 50%;
color: #fff;
cursor: pointer;
margin-left: 9px;
position: relative;
bottom: 80px;
}
#num-btn {
top: -150px;
left: 35%;
}
#img{
300px;
height: 200px;
position: relative;
}
</style>
</head>
<body>
<div class="lb">
<img src="img/1.jpg" id="img" />
<img src="img/btn_l.png" id="left-arrow" />
<img src="img/btn_r.png" id="right-arrow" />
<div id="num-btn">
<span style="background: #f00;">1</span>
<span style="background: #000000;">2</span>
<span style="background: #000000;">3</span>
<span style="background: #000000;">4</span>
<span style="background: #000000;">5</span>
<span style="background: #000000;">6</span>
<span style="background: #000000;">7</span>
<span style="background: #000000;">8</span>
</div>
</div>
<script type="text/javascript">
var left = document.getElementById("left-arrow");
var right = document.getElementById("right-arrow");
var img = document.getElementById("img");
var index = 1;
var btns = getChildren("num-btn","span");
function getChildren (id,tagname) {
var arr=document.getElementById(id).childNodes;
var ele=[];
for(var i=0;i<arr.length;i++){
if(arr[i].tagName==tagname.toUpperCase()){
ele.push(arr[i]);
}
}
return ele;
}
//让数字匹配图片
for(var i = 0; i < btns.length; i++) {
btns[i].onclick = (function() {
var j = i + 1;
return function() {
index = j;
img.src = "img/" + index + ".jpg"
changebg();
}
})();
}
function changebg() {
for(var i = 0; i < btns.length; i++) {
btns[i].style.background = "#000";
}
btns[index - 1].style.background = "#f00";
}
var moveLeft = function() {
index++;
if(index > 8) index = 1;
img.src = "img/" + index + ".jpg"
changebg();
}
right.onclick = moveLeft;
left.onclick = function() {
index--;
if(index < 1) index = 8;
img.src = "img/" + index + ".jpg";
changebg();
}
var timer = setInterval(moveLeft, 1000);
var lb = document.getElementsByClassName("lb")[0];
lb.onmouseover = function() {
clearInterval(timer);
};
lb.onmouseout = function() {
timer = setInterval(moveLeft, 1000);
}
</script>
</body>
</html>