3

我有 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 v1.7.2在哪里jquery.js并且slide.js是最新的 slide.js 下载。

对我来说，这似乎也是正确的顺序。我app.js做的是 

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

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

我在这里没有做什么？

4

3 回答 3

3

你忘记了一些 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/

于 2012-06-17T23:31:41.600 回答
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吗？

于 2012-06-17T23:23:44.787 回答
0

尝试使用 JQuery 循环：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
});
于 2012-06-17T23:26:56.520 回答