<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-13-轮播图案例</title>
<style>
*{padding: 0px;margin: 0px;}
#box{margin: 50px auto;width: 960px;height: 362px;overflow: hidden;position: relative;}
ul,ol{list-style: none;}
#pic li{width:960px;height:362px;}
#list{position: absolute;bottom:10px;right:10px;}
#list li{float:left;
color:#f90;
background: #fff;
font-weight: bold;
font-size: 25px;
margin-right: 5px;
height:25px;
line-height: 25px;
width:25px;
text-align: center;
border-radius: 50%;
cursor:pointer;
}
for(var i=0;i<list.length;i++){
list[i].id=i
list[i].onmouseover=function(){
change(this.id)
}
}
#list .on{background: blue;}
</style>
</head>
<body>
<div id="box">
<ul id="pic">
<li><img src="images/01.png" alt=""></li>
<li><img src="images/02.png" alt=""></li>
<li><img src="images/03.png" alt=""></li>
<li><img src="images/04.png" alt=""></li>
<li><img src="images/05.png" alt=""></li>
</ul>
<ol id="list">
<li class='on'>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<script>
var pic=document.getElementById('pic')
var list=document.getElementById('list').getElementsByTagName('li')
var index=0
var time=null
function auto(){
time=setInterval(function(){
index++;
if (index>=list.length){
index=0
}
change(index)
},2000)
}
auto()
function change(curIndex){
pic.style.marginTop=-362*curIndex+'px'
for (var i=0;i<list.length;i++){
list[i].className=''
list[curIndex].className='on';
index=curIndex;
}
}
pic.onmouseover=function(){
clearInterval(time)
}
pic.onmouseout=auto
for (var i=0;i<list.length;i++){
list[i].id=i
list[i].onmouseover=function(){
change(this.id)
}
}
</script>
</body>
</html>
A72BDB68-F5FA-4D0F-906E-EACAA6A1EFA5.rar
需积分: 5 162 浏览量
2024-03-29
10:09:07
上传
评论
收藏 3.25MB RAR 举报
A72BDB68-F5FA-4D0F-906E-EACAA6A1EFA5.rar （6个子文件） 
2024-03-13-轮播图的制作 
2024-03-13-轮播图的制作.html 2KB images 
05.png 542KB 02.png 934KB 04.png 909KB 01.png 612KB 03.png 330KB资源评论
