码迷,mamicode.com
首页 > 其他好文 > 详细

幻灯片效果

时间:2015-07-16 18:21:43      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:

幻灯片效果

<BODY>
<div id="dh">
<img src="images/t1.jpg"/>
<img src="images/t2.jpg"/>
<img src="images/t3.jpg"/>
<img src="images/t4.jpg"/>
<img src="images/t5.jpg"/>
</div>

 

========================

 

*{margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;color:red;}
html,body{width:100%;height:100%;background:#FFF;font-size:12px;font-family:"宋体"}
#dh{width:595px;height:260px;margin:6px;overflow:hidden;}

 

==========================================

 

$(function(){
$("#dh>img").not(":last").hide();
setInterval(function(){
if($("#dh>img").filter(":visible").prev().is("img"))
{
$("#dh>img").filter(":visible").fadeOut(200).prev().fadeIn(500);
}
else{
$("#dh>img").filter(":visible").fadeOut(200).end().last().fadeIn(500);
}
},2000);


})

 

幻灯片效果

标签:

原文地址:http://www.cnblogs.com/leshao/p/4651763.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!