标签：
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>
标签：
原文地址：http://www.cnblogs.com/liujianhui/p/4592029.html
