Question

我的HTML包含按以下顺序排列的脚本

<script src="../static/js/jquery.js" type="text/javascript">
<script src="../static/js/bootstrap.js" type="text/javascript">
<script src="../static/js/slides.js" type="text/javascript">
<script src="../static/js/app.js" type="text/javascript">

并且图像与div绑定为

<div id="slideshow">
    <div id="slides">
        <img src="../static/img/slideshow/01.JPG">
        <img src="../static/img/slideshow/02.JPG">
        <img src="../static/img/slideshow/03.JPG">
        <img src="../static/img/slideshow/04.JPG">
        <img src="../static/img/slideshow/05.JPG">
        <img src="../static/img/slideshow/06.JPG">
    </div>
</div>

其中jquery.js是JQuery v1.7.2，slide.js是最新下载的slide.js。

对我而言，它似乎也是正确的顺序。我的app.js所做的是

$(function(){
    $('#slides').slides({
        width: 600,
        height: 120,
        pagination: false,
        previous: false
    });
    $('#slides').slides("play");
});

我试过Firefox和Chrome，它似乎不起作用，我的所有图像都是一个接一个地显示

我在这里做的不是什么？

Answer 1

你忘了一些div类。

你可以在这里找到一个jsfiddle示例：http://jsfiddle.net/rNF8G/

编辑1：

您可以将play: 2000属性添加到第一个块，而不是像这样调用它：$('#slides').slides("play"); 在此处查看我的修改：http://jsfiddle.net/rNF8G/1/

编辑2：

要删除分页，您只需添加以下属性：

generatePagination: false

您可以在以下更新中看到它：http://jsfiddle.net/rNF8G/117/

Answer 2

而不是......

$(function(){
    $('#slides').slides({
        width: 600,
        height: 120,
        pagination: false,
        previous: false
    });
    $('#slides').slides("play");
});

试试这个......

$(document).ready(function(){
    $('#slides').slides({
        width: 600,
        height: 120,
        pagination: false,
        previous: false
    });
    $('#slides').slides("play");
});

您似乎没有将处理程序正确附加到文档就绪事件

如果这不起作用，您可以提供jsfiddle吗？

Answer 3

尝试使用JQuery Cycle：http://jquery.malsup.com/cycle/

<强> HTML

<div id="slides">
        <img src="../static/img/slideshow/01.JPG">
        <img src="../static/img/slideshow/02.JPG">
        <img src="../static/img/slideshow/03.JPG">
        <img src="../static/img/slideshow/04.JPG">
        <img src="../static/img/slideshow/05.JPG">
        <img src="../static/img/slideshow/06.JPG">
</div>

<强> JQuery的

$('#slides').cycle({ 
        fx:     'scrollRight', 
    speed:  'slow', 
    timeout: 5000
});

slides.js无法正常工作

3 个答案: