jq淡入淡出轮播图

来源：互联网发布：传奇霸业法师武魂数据编辑：程序博客网时间：2024/05/21 06:10
<!DOCTYPE><html>   <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      <title>jquery制作图片淡入淡出图片切换效果</title>   </head>   <body>   <style type="text/css">   *{margin:0;padding:0;list-style-type:none;}   a,img{border:0;}   body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}   /* flash */   .flash{width:100%;height:930px;overflow:hidden;position:relative;}   .flash li{position:absolute;left:0;top:0;width:100%;height:100%;}   </style>   <script src="./jquery-1.11.2.min.js"></script>   <script type="text/javascript">   //图片简单切换调用语句 imgtransition({speed: 3000, animate: 1000});    $.fn.imgtransition = function(o){      var defaults = {         speed : 5000,         animate : 1000      };      o = $.extend(defaults, o);      return this.each(function(){         var arr_e = $("li", this);         arr_e.css({position: "absolute"});         arr_e.parent().css({margin: "0", padding: "0", "list-style": "none", overflow: "hidden"});         function shownext(){            var active = arr_e.filter(".active").length ? arr_e.filter(".active") : arr_e.first();            var next =  active.next().length ? active.next() : arr_e.first();            active.css({"z-index": 9});            next.css({opacity: 0.0, "z-index": 10}).addClass('active').animate({opacity: 1.0}, o.animate, function(){               active.removeClass('active').css({"z-index": 8});            });         }         arr_e.first().css({"z-index": 9});         setInterval(function(){            shownext();         },o.speed);               });   };   </script>   <div class="flash">      <ul>         <li><a href="#"><img width="100%" height="100%"  src="./222.jpg" /></a></li>         <li><a href="#"><img width="100%" height="100%"  src="./333.jpg" /></a></li>                  <li><a href="#"><img width="100%" height="100%" src="./444.jpg" /></a></li>         <li><a href="#"><img width="100%" height="100%"  src="./555.jpg" /></a></li>      </ul>   </div>   <script type="text/javascript">   $(document).ready(function(){      $('.flash').imgtransition({         speed:5000,  //图片切换时间         animate:2000 //图片切换过渡时间      });   });   </script>    </body></html>
阅读全文
0 0