轮播图

最新推荐文章于 2023-02-09 17:02:12 发布

原创最新推荐文章于 2023-02-09 17:02:12 发布 · 342 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.banner{
width: 780px;
height: 463px;
margin: 13px auto 15px auto;
position: relative;
overflow: hidden;
}
.banner .banner-pic .pic{display: none;}
.banner .banner-pic .current{display: block;}
.banner ul{
position: absolute;
left: 370px;
top: 425px;
}
.banner ul .but{
float: left;
width: 20px;
height: 20px;
border: 1px solid #0066ff;
margin-right: 20px;
}
.banner ul li{cursor: pointer;}
.banner ul .current{
background: #fe0048;
float: left;
width: 20px;
height: 20px;
border: 1px solid #fe0048;
margin-right: 20px;
}
ul{list-style-type: none;}
</style>
<script type="text/javascript">
window.onload=function(){
var current_index=0;
var timer=window.setInterval(autoChange,2000);
var button_li=document.getElementById("button").getElementsByTagName("li");
var pic_div=document.getElementById("bannner-pic").getElementsByTagName("div");
for(var i=0;i<button_li.length;i++){
button_li[i].onmouseover=function(){
if(timer){
clearInterval(timer);
}
for(var j=0;j<pic_div.length;j++){
if(button_li[j]==this){
current_index=j;
button_li[j].className="current";
pic_div[j].className="current";
}else{
pic_div[j].className="pic";
button_li[j].className="but";
}
}
}
button_li[i].onmouseout=function(){
timer=setInterval(autoChange,5000);
}
}
function autoChange(){
++current_index;
if(current_index==button_li.length){
current_index=0;
}
for(var i=0;i<button_li.length;i++){
if(i==current_index){
button_li[i].className="current";
pic_div[i].className="current";
}else{
pic_div[i].className="pic";
button_li[i].className="but";
}
}
}
}
</script>
</head>
<body>
<div class="banner">
<div class="banner-pic" id="bannner-pic">
<div class="current"><img src="img/01.jpg" /></div>
<div class="pic"><img src="img/02.jpg" /></div>
<div class="pic"><img src="img/03.jpg" /></div>
</div>
<ul id="button">
<li class="current"></li>
<li class="but"></li>
<li class="but"></li>
</ul>
</div>
</body>
</html>