淡入淡出效果

   <script type="text/javascript" src="js/jQuery1.7.2.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>
<style type="text/css">
  .flash a{
   border:none;
 }
   .flash img{
   border:none;
 } 
.flash li{
   border:none;
 }   
</style>
<div class="flash">
<ul>
<li><a href="#" title="肇庆港务有限公司"  ><img width="1002" height="157" alt="维度端美女" src="http://file.weiduduan.com/201305/0531/1901/183/images/126.jpg" /></a></li>
<li><a href="#" title="肇庆港务有限公司" ><img width="1002" height="157" alt="weiduduan美女" src="http://file.weiduduan.com/201305/0531/1901/183/images/12456.jpg" /></a></li>
</ul>
</div>


<script type="text/javascript">
$(document).ready(function(){
$('.flash').imgtransition({
speed:6000,  //图片切换时间
animate:1000 //图片切换过渡时间
});
});
</script> 

你可能感兴趣的:(淡入淡出效果)