<!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淡入淡出轮播图
最新推荐文章于 2022-09-04 23:56:48 发布