切换图片时，图片的透明图依次增加，直到为显示状态，图片一张一张切换显示，下面有相应的图片角标切换，当鼠标移到哪个角标上时，切换到那张图片上，不再切换，鼠标移出，再次切换
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闪白效果</title>
<style type="text/css">
#div1{
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;
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++){//将所有图片隐藏
aimg[i].style.display='none';
}
shanbai();//对index号进行闪白
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].style.display='none';
}
shanbai();//对index号进行闪白
for(var i=0;i<ali.length;i++){//让相应的li变样式
ali[i].className='';
}
ali[index].className='cur';
}
ali[i].onmouseout=function(){//鼠标移出，重新开定时器
timer=setInterval(qiehuan,1000);
}
}
function shanbai(){//闪白效果
aimg[index].style.display='block';//让对应的图片显示
aimg[index].style.opacity=0;//透明度变为0
aimg[index].style.filter='alpha(opacity=0)';
var toumingdu=0;
touming=setInterval(function(){//设置定时器，让透明度依次增加
toumingdu++;
aimg[index].style.opacity=toumingdu/100;
aimg[index].style.filter='alpha(opacity='+toumingdu+')';
if(toumingdu==100){//如果透明度为100，停止定时器，提高效率
clearInterval(touming);
}
},2);
}
}
</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>