使用jQuery循環插件幻燈片圖像

Question

我想使用jQuery循環插件幻燈片圖像， ，但它不工作。如何使它可以運行。

附送腳本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="https://malsup.github.com/jquery.cycle.all.js"></script>  

CSS：

.pics { 
      height: 232px; 
      width: 232px; 
      padding: 0; 
      margin: 0; 
     } 

     .pics img { 
      padding: 15px; 
      border: 1px solid #ccc; 
      background-color: #eee; 
      width: 200px; 
      height: 200px; 
      top: 0; 
      left: 0 
     } 

腳本：

$(function(){ 
     $('.pics').cycle('fade'); 
    });​ 

產品圖股利

  <div class="pics"> 
       <img src="http://davealger.info/i/1.jpg" width="200" height="200" /> 
       <img src="http://davealger.info/i/2.bmp" width="200" height="200" /> 
       <img src="http://davealger.info/i/3.png" width="200" height="200" /> 
      </div> 

Answer 1

變化https://malsup.github.com/jquery.cycle.all.js到http:// - 或者更好的是，下載該插件和饒他可憐的服務器。 Google使用大容量的CDN;他沒有。

http://jsfiddle.net/mblase75/ZSJqh/

Answer 2

$(function(){ 
    $('.pics').cycle({fx: 'fade'}); 
});​ 

見文檔：http://malsup.com/jquery/cycle/

Answer 3

如果在不下載腳本在本地設置，然後跟上最新的。

1. Cycle.js被移動。
2. 不要使用http：//或https：//

在這裏，這是從該網站的演示採取和編輯一點點：

<!-- include jQuery library --> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<!-- include Cycle plugin --> 
<script type="text/javascript" src="//cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.slideshow').cycle({ 
     fx: 'fade' 
    }); 
}); 
</script> 

注意，週期的位置.js
查看演示的源代碼是值得的。