怎么用js做自动轮播图(不要用jq做的,是js,js!带1,,2,3,4,5的那种)
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin:0;padding:0;}
#box{position: relative;width:500px;height:300px;margin:30px auto;}
#box ul:after{content: "";display: block;clear:both;width:0;height: 0;}
li{list-style:none;}
#img{width:500px;height: 300px;position: relative;}
#img li{position: absolute;top:0;left:0;width:500px;height:300px;font-size: 40px;text-align: center;line-height: 300px;display: none;background:#f4f4f4;color:blue;}
#img li.show{display: block;}
#list {width:500px;height:30px;line-height: 30px;color:#333;position: absolute;bottom:0;left:0;}
#list li{float:left;;background:green;width:125px;height:30px;text-align: center;line-height: 30px;font-size: 20px;}
#list li.active{background:blue;color:#fff;}
.control{position: absolute;top:125px;display: block;width:30px;height:50px;text-align: center;line-height: 50px;background:#666;color:#fff;}
#prev{left:0;}
#next{right:0;}
</style>
</head>
<body>
<div id="box">
<ul id="img">
<li class="show">图1</li>
<li>图2</li>
<li>图3</li>
<li>图4</li>
</ul>
<ul id="list">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="prev" class="control">左</div>
<div id="next" class="control">右</div>
</div>
<script type="text/javascript">
var box = document.getElementById("box");
var img = document.getElementById("img").getElementsByTagName("li");
var list = document.getElementById("list").getElementsByTagName("li");
var next = document.getElementById("next");
var prev = document.getElementById("prev");
for (var i = 0; i < list.length; i++) {
list[i].index = i;
list[i].onclick = function(){
for(var j = 0;j<list.length;j++){
list[j].className="";
img[j].className="";
}
this.className="active";
img[this.index].className="show";
}
}
next.onclick = function(){
play(false);
}
prev.onclick = function(){
play(true);
}
function play(bool){
for(var i = 0;i<list.length;i++){
if(list[i].className=="active"){
var index = i;
break;
}
}
bool ?(index == 0? index= list.length-1:index--):(index == list.length-1? index= 0:index++);
for(var j = 0;j<list.length;j++){
list[j].className="";
img[j].className="";
}
list[index].className="active";
img[index].className="show";
}
autoPlay();
function autoPlay(){
timer = setInterval(function(){
play(false);
//设置自动轮播时间为1s
},1000)
}
box.onmouseover = function(){
clearInterval(timer);
}
box.onmouseout=autoPlay;
</script>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
