javascript - slides.js not working - Stack Overflow

admin管理员组

文章数量:1332377

I have HTML which includes scripts in following order

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

and images are tied to div as

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

where jquery.js is JQuery v1.7.2 and slide.js is latest slide.js downloaded.

To me it seems correct order as well. What my app.js does is

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

I tried on both Firefox and Chrome, it doesn't seem to work, all my images are displayed one after the another

What is that I am not doing right here??

I have HTML which includes scripts in following order

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

and images are tied to div as

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

where jquery.js is JQuery v1.7.2 and slide.js is latest slide.js downloaded.

To me it seems correct order as well. What my app.js does is

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

I tried on both Firefox and Chrome, it doesn't seem to work, all my images are displayed one after the another

What is that I am not doing right here??

• javascript
• jquery
• slideshow

Share Improve this question Follow asked Jun 17, 2012 at 23:19 daydreamerdaydreamer 92.2k204204 gold badges473473 silver badges750750 bronze badges 2

• It doesn't seem to work how? No slideshow? slideshow but it doesn't do anything? Any errors in the console? – Basic Commented Jun 17, 2012 at 23:21
• I don't see any errors in console @Basic – daydreamer Commented Jun 17, 2012 at 23:22

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You forget some div classes.

You can find a jsfiddle example I put in place here : http://jsfiddle/rNF8G/

EDIT 1:

You can add the play: 2000 property to the first block instead of calling it like this : $('#slides').slides("play"); See my edit here : http://jsfiddle/rNF8G/1/

EDIT 2:

To remove pagination, all you have to do is to add the following property :

generatePagination: false

You can see it in the following update : http://jsfiddle/rNF8G/117/

Instead of this...

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

try this...

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

You don't seem to be attaching the handler correctly to the document ready event

If that doesn't work, can you provide a jsfiddle?

Try with JQuery Cycle: http://jquery.malsup./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
});

本文标签： javascriptslidesjs not workingStack Overflow