jq淡入淡出轮播图

<!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>
jq淡入淡出轮播图

猜你喜欢
