簡單輪播圖3（淡入淡出）
阿新 • • 發佈：2019-01-09
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" 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疊加在一起，並沒有新增位元組點