使用jQuery循环插件播放幻灯片图像

我正在尝试使用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>    

脚本：

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

---

参见文档：

更改

https://malsup.github.com/jquery.cycle.all.js

到

http://

——或者更好的办法是，下载插件，腾出他那可怜的服务器。谷歌使用大容量CDN；他没有

---

如果设置为不将脚本下载到本地，请保持最新

Cycle.js已被移动

不要使用http://或https://

这里，这是从网站的演示和编辑了一个tad：

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

$（文档）.ready（函数（）{
$（'.slideshow'）。循环({
外汇：“褪色”
});
});

请注意cycle.js的位置

---

查看演示的源代码是值得的。

下载了jquery.cycle.all.js，但也没有放映幻灯片。图像显示为列表如果图像显示为列表，那么jQuery Cycle插件由于某种原因没有加载。检查你的控制台，并仔细检查文件是否被加载，以及加载顺序是否正确。我在谷歌ChromeDouble中检查了文件是否被正确加载。检查你的选择器。这就是我所能建议的，而无需将当前代码作为JSFIDLE或其他东西发布。我已经从我的文件夹下载并链接了它，现在它可以工作了。问题只是没有链接jquery.cycle.all.latest.js文件链接脚本是必不可少的。使用本地文件可以提高性能和加载时间。

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

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