jQuery实现的透明度变化，
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明度渐变幻灯片</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.box{
width: 710px;
height: 475px;
border: 1px solid #aaa;
margin: 50px auto 0;
position: relative;
}
.boxList{
width: 2840px;
}
.box>li{
width: 710px;
height: 100%;
position: absolute;
}
.box li a{
display: block;
width: 100%;
height: 100%;
}
.box li a img{
width: 100%;
}
.btn{
width: 150px;
height: 30px;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -75px;
}
.btn li{
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #05213B;
margin-left: 10px;
z-index: 10;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<ul class="box">
<li><a href="#"><img src="image/dhaisdkla.jpg" alt=""></a></li>
<li><a href="#"><img src="image/kxz61.jpg" alt=""></a></li>
<li><a href="#"><img src="image/msjd.jpg" alt=""></a></li>
<li><a href="#"><img src="image/vtsj.jpg" alt=""></a></li>
<ul class="btn">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</ul>
</body>
</html>
js脚本部分
<script>
$(function(){
wheel()
})
function wheel(){
var boxList = $(".box>li");
var btnList = $(".btn li");
var index=0;
var timer;
timer=setInterval(function(){
animt()
},3000)
// 按钮控制
btnList.hover(function(){
clearInterval(timer)
// 点击事件控制
btnList.click(function(){
index=$(this).index()
animt()
})
},function(){
timer=setInterval(function(){
animt()
},3000)
})
// 高亮按钮
function gl(){
for (var i = 0; i < btnList.length; i++) {
$(btnList[i]).css({
backgroundColor: "#05213B"
})
$(btnList[index]).css({
backgroundColor: "#AAA"
})
};
}
// animt 渐变动画
function animt(){
gl()
if(index>=3){
index=0
}else{
index++;
}
for (var i = 0; i < boxList.length; i++) {
$(boxList[i]).css({
opacity: 0
})
$(boxList[index]).stop().animate({
opacity: 1
},800)
}
}
}
</script>
时间： 2024-08-01 19:14:52