风吹起如花般破碎的流年，而你的笑容摇晃摇晃，成为我命途中最美的点缀!
Php爱好者新版上线啦！
-3 3

自己动手写了个jquery幻灯片

Category:jquery学习 View: Author:燕子

        在网上找了点资料，然后加上自己的发挥，用jquery写下了现在的幻灯片，给大家分享下下！

JavaScript代码
  1. <script type="text/javascript" language="javascript">   
  2. var cle;   
  3. function picSwitch(){   
  4.     var $current = $(".cont div.current");   
  5.     // 判断div.current个数为0的时候 $current的取值   
  6.     /*if ( $current.length == 0 )  
  7.     $current = $(".cont div:last");*/  
  8.     // 判断div.current存在时则匹配$current.next(),否则转到第一个div   
  9.     var $next =  $current.next().length ? $current.next() : $(".cont div:first");   
  10.     $current.addClass('prev');   
  11.        
  12.     $next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 1000, function() {   
  13.         $current.removeClass("current prev");   
  14.     });   
  15. }   
  16. $(document).ready(function(){   
  17.      $(".current").css("opacity","1.0");   
  18.     cle = setInterval( "picSwitch()", 2000 );// 设定时间(1000=1秒)   
  19.     $(".cont img").mouseover(function(){   
  20.         clearInterval(cle);   
  21.     }).mouseout(function(){   
  22.         $(".current").css("opacity","1.0");   
  23.         cle = setInterval( "picSwitch()", 2000 );   
  24.     })   
  25.        
  26. })   
  27. </script>  
XML/HTML代码
  1. </head>  
  2. <body>  
  3. <div class="cont">  
  4.     <div class="current"><img src="1.jpg" width="127" height="180" /></div>  
  5.        
  6.     <div><img src="2.jpg" width="127" height="180" /></div>  
  7.        
  8.     <div><img src="3.jpg" width="127" height="180" /></div>  
  9. </div>  
  10.   
  11. </body>  
  12. </html>  
CSS代码
  1. <style type="text/css">   
  2. body{text-align:center;font-family:Arial, Helvetica, sans-serif;}   
  3. .cont{position:relative;height:180px;width:127px;border:10px solid #ddd;margin:0 auto 15px;}   
  4. .cont div{position:absolute;top:0;left:0;overflow:hidden;background-color:#FFF;}   
  5. .cont div.current{z-index:10;}   
  6. .cont div.prev{z-index:9;}   
  7. .cont div img{border:0;}   
  8. </style>  

 

难得传文件包下载，大家自己复制粘贴代码呢。

 


本文来源于php爱好者：php教程 —http://www.phplover.cn/
原文地址：http://www.phplover.cn/post/jquery-huandengpian.html

jquery   评论(0)

相关文章:

发表评论

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。