<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="banner">
<div class="img_box">
<img class="select" src="images/pic1.jpg" alt="">
<img src="images/pic2.jpg" alt="">
<img src="images/pic3.jpg" alt="">
<img src="images/pic4.jpg" alt="">
</div>
<ul class="num">
<li class="select"></li>
<li></li>
<li></li>
<li></li>
</ul>
<a class="banner_left" href="javascript:;"></a>
<a class="banner_right" href="javascript:;"></a>
</div>
</body>
<script >
var oBanner=document.getElementById("banner");
var aImgs=document.getElementsByTagName("img");
var alis=document.getElementsByTagName("li");
var bannerRight=document.getElementsByClassName("banner_right")[0];
var bannerLeft=document.getElementsByClassName("banner_left")[0];
function change(n) {
for (var i = 0; i < alis.length; i++) {
alis[i].className = "";
aImgs[i].className = "";
}
alis[n].className = "select";
aImgs[n].className = "select";
}
//选项点击
for(var i=0;i<alis.length;i++){
alis[i].index=i;
alis[i].οnclick=function(){
change(this.index);
step=this.index;
}
}
//右点击
var step=0;
bannerRight.onclick =fn
function fn() {
step++;
if(step>3){
step = 0;
}
change(step);
}
//左点击
bannerLeft.οnclick=function() {
step--;
if(step<0){
step=3;
}
change(step);
}
var timer=window.setInterval(fn,1000);
oBanner.οnmοuseοver=function(){
window.clearInterval(timer);
bannerLeft.className="banner_left select";
bannerRight.className="banner_right select";
}
oBanner.οnmοuseοut=function(){
timer=window.setInterval(fn,1000);
bannerLeft.className="banner_left";
bannerRight.className="banner_right";
}
</script>
</html>
扫一扫
8918
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
