使用 jQuery Cycle 插件的幻灯片图像答案

【问题标题】：slideshow images using jQuery Cycle Plugin使用 jQuery Cycle 插件的幻灯片图像
【发布时间】：2012-12-13 11:55:28
【问题描述】：

我正在尝试使用 jQuery Cycle 插件来幻灯片显示图像，但它不工作。如何使其可运行。

包含的脚本

<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>

【问题讨论】：

标签： jquery jquery-cycle

【解决方案1】：

将https://malsup.github.com/jquery.cycle.all.js 更改为http:// -- 或者更好的是，下载插件并省去他可怜的服务器。 Google 使用大容量 CDN；他没有。

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

【讨论】：

下载了 jquery.cycle.all.js 然后也没有显示幻灯片。图片显示为列表
如果图像显示为列表，则 jQuery Cycle 插件由于某种原因未加载。检查您的控制台并仔细检查文件是否正在以正确的顺序加载。
我在谷歌浏览器中检查过它已正确加载
仔细检查您的选择器。这就是我可以建议的全部内容，而无需您将当前代码发布为 jsfiddle 或其他内容。

【解决方案2】：

如果您设置不将脚本下载到本地，请保持最新状态。

Cycle.js 已移动。
不要使用 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>

注意cycle.js的位置
看看演示的源代码是值得的。

【讨论】：

我已经从我的文件夹下载并链接，现在它可以工作了。问题只是没有链接 jquery.cycle.all.latest.js 文件
链接脚本是必不可少的。使用本地文件可以提高性能和加载时间。

【解决方案3】：

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

参见文档：http://malsup.com/jquery/cycle/

【讨论】：