幻灯片.js不起作用

slides.js not working

本文关键字：不起作用 js 幻灯片      更新时间：2023-09-26

我有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是最新的幻灯片.js下载。

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

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

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

我在这里没有做什么？？

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

取而代之的是...

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

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

杰奎里

$('#slides').cycle({ 
        fx:     'scrollRight', 
    speed:  'slow', 
    timeout: 5000
});
相关文章：