没有鼠标事件时，图片一张一张切换显示，下面有相应的图片角标切换，当鼠标移到哪个角标上时，切换到那张图片上，不再切换，鼠标移出，再次切换。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播效果</title>
<style type="text/css">
#div1{
width:730px;
height:454px;
background: 1px solid blue;
margin:0 auto;
position: relative;
}
#div1 img{
position: absolute;
display: none;
}
#div1 img.cur{
display:block;
}
#div1 ul{
position: absolute;
right:0px;
top:400px;
}
#div1 ul li{
float: left;
list-style: none;
background: #3E3E3E;
width:25px;
height: 25px;
line-height: 25px;
text-align: center;
color:white;
margin-right:10px;
border-radius: 12px;
}
#div1 ul .cur{
background:#B61B1F;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById(‘div1‘);//获得div1元素
var aimg=oDiv.getElementsByTagName(‘img‘);//获得img元素
var ali=oDiv.getElementsByTagName(‘li‘);//获得li标签
var index=0;//定义全局变量，记录切换样式的角标
function qiehuan(){//切换图片的方法
index++;//角标加1
if(index==6){//如果角标为6,直接变成0，因为有6张图片，最大角标为5
index=0;
}
for(var i=0;i<aimg.length;i++){//将所有图片的class去掉，全部不显示
aimg[i].className=‘‘;
}
aimg[index].className=‘cur‘;//根据角标依次添加cur属性，依次显示
for(var i=0;i<ali.length;i++){//将所有li的class都去掉，都不显示
ali[i].className=‘‘;
}
ali[index].className=‘cur‘;//根据角标依次添加cur属性，依次显示
}
var timer=setInterval(qiehuan,1000);//定义定时器，每1秒切换一张图片
for(var i=0;i<ali.length;i++){//for循环，添加事件
ali[i].onmouseover=function(e){//鼠标移入li事件
clearInterval(timer);//关闭定时器
var ev=e||window.event;
var curo=ev.srcElement||ev.target;//获得事件对象，
for(var j=0;j<ali.length;j++){
if(ali[j]==curo){
index=j;//鼠标移到哪个li标签上，将角标赋给index
}
}
for(var i=0;i<aimg.length;i++){//同上，让相应的图片显示
aimg[i].className=‘‘;
}
aimg[index].className=‘cur‘;
for(var i=0;i<ali.length;i++){//让相应的li变样式
ali[i].className=‘‘;
}
ali[index].className=‘cur‘;
}
ali[i].onmouseout=function(){//鼠标移出，重新开定时器
timer=setInterval(qiehuan,1000);
}
}
}
</script>
</head>
<body>
<div id="div1">
<img class="cur" src="1.jpg" alt="第一张">
<img src="2.jpg" alt="第二张">
<img src="3.jpg" alt="第三张">
<img src="4.jpg" alt="第四张">
<img src="5.jpg" alt="第五张">
<img src="6.jpg" alt="第六张">
<ul>
<li class="cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
时间： 2024-10-07 23:44:03