html部分
<html>
<head>
<meta charset="UTF-8">
<title>轮播图淡入淡出</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/轮播图4.css" />
<script type="text/javascript" src="../js/basics.js"></script>
<script type="text/javascript" src="../js/轮播图4.js"></script>
</head>
<body>
<div id="wrap">
<div id='box'>
<ul class="clear" id="list">
<li class="active">
<img src="../img/1504579720226.jpg" />
</li>
<li>
<img src="../img/1504579756992.jpg" />
</li>
<li>
<img src="../img/1504579814977.jpg" />
</li>
<li>
<img src="../img/1504579832741.jpg" />
</li>
<li>
<img src="../img/1504579877857.jpg" />
</li>
</ul>
</div>
<div id='box2'>
<ul class="clear">
<li class="active2">
<img src="../img/1504579720226.jpg" />
</li>
<li>
<img src="../img/1504579756992.jpg" />
</li>
<li>
<img src="../img/1504579814977.jpg" />
</li>
<li>
<img src="../img/1504579832741.jpg" />
</li>
<li>
<img src="../img/1504579877857.jpg" />
</li>
</ul>
</div>
</div>
</body>
</html>
CSS部分
#wrap{
width: 900px;
height: 600px;
margin: 100px auto 0;
}
#box{
height: 450px;
width: 800px;
border: solid 2px #0000FF;
position: relative;
}
#box ul li{
position: absolute;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
}
#box ul li img{
height: 450px;
width: 800px;
display:block;
}
#box ul .active{
opacity: 1;
filter: alpha(opacity=1);
}
#box2{
margin-top: 20px;
height: 150px;
width: 800px;
}
#box2 ul li{
float: left;
margin-right: 75px;
opacity: 0.3;
filter: alpha(opacity=30);
}
#box2 ul li:last-child{
margin-right: 0;
}
#box2 ul li img{
width: 100px;
height: 90px;
}
#box2 ul .active2{
opacity: 1;
filter: alpha(opacity=100);
}
js部分
window.onload = function(){
var box = $('box');
var oUl = $('list');
var lis = oUl.getElementsByTagName('li');
var box2 = $('box2');
var lis2 = box2.getElementsByTagName('li');
var i = 0;
var timer = setInterval(function(){
i++;
move();
},1000);
function move(){
if(i == lis.length){
i = 0;
}
//相等是同时改变二者的透明度
for(var j = 0;j < lis.length;j++){
if(j == i){
animateOpacity(lis2[j],100);//封装的改变透明度的方法
animateOpacity(lis[j],100);
}else{
animateOpacity(lis2[j],30);
animateOpacity(lis[j],0);
}
}
}
for(var k = 0; k < lis2.length;k++){
lis2[k].index = k;
lis2[k].onmouseover = function(){
i = this.index;
move();
clearInterval(timer);
};
lis2[k].onmouseout = function(){
timer = setInterval(function(){
i++;
move();
},1000);
};
}
box.onmouseover = function(){
clearInterval(timer);
};
box.onmouseout = function(){
timer = setInterval(function(){
i++;
move();
},1000);
};
};
注意事项:
1、与前面两个轮播图相似,只是改变了li的透明度
2、这里只是将所有的li叠加在一起,并没有添加字节点