返回列表 發帖

圖片漸層輪播

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  2. <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
複製代碼
  1. <style type="text/css">
  2. .pics {  
  3.     height:  232px;  
  4.     width:   232px;  
  5.     padding: 0;  
  6.     margin:  0;  
  7. }
  8. .pics img {  
  9.     padding: 15px;  
  10.     border:  1px solid #ccc;  
  11.     background-color: #eee;  
  12.     width:  200px;
  13.     height: 200px;
  14.     top:  0;
  15.     left: 0;
  16. }
  17. </style>
複製代碼
  1. <div class="pics">
  2.     <a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" border="0" /></a>
  3.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
  4.     <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /></div>
  5. <script type="text/javascript">

  6. $('.pics').cycle({
  7.     fx:    'fade',
  8.     speed:  1000
  9. });
  10. </script>
複製代碼
附件: 您需要登錄才可以下載或查看附件。沒有帳號?註冊

返回列表