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.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 の両方で試しましたが、うまくいかないようです。すべての画像が次々に表示されます。

ここで私がしていないことは何ですか??

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 に答える