0

jquery / javascriptを初めて使用し、ヘルプが必要です。

サイクルプラグインを複数のdivで使用し、各divで異なるイメージを使用したいと思います。各divは同じサイズであり、各画像は同じサイズです。

これまで使用したコードでは、最初のdivのすべての画像が表示されますが、ロゴ（index.htmlにリンクされている）をクリックすると、すべての画像が突然所定の位置に表示され、cycleプラグインで動作します。

これは私が頭の中に持っているものです

<script type="text/javascript" src="js/jquery-1.3.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#box1').cycle({ 
                        fx:     'fade', 
                       speed:   300, 
                       timeout: 0, 
                       next:   '#box1', 
                       pause:   1  
                });
            });

            $(document).ready(function(){
                $('#box2').cycle({ 
                        fx:     'fade', 
                       speed:   300, 
                       timeout: 0, 
                       next:   '#box2', 
                       pause:   1  
                });
            });

            $(document).ready(function(){
                $('#box3').cycle({ 
                        fx:     'fade', 
                       speed:   300, 
                       timeout: 0, 
                       next:   '#box3', 
                       pause:   1  
                });
            });
        </script>

体...

<div id="container">


            <div id="box1" class="box">
            <img src="images/car.jpg" alt="images/car.jpg"/>
            <img src="images/van.jpg" alt="images/van.jpg"/>
            </div>


            <div id="box2" class="box">
            <img src="images/bottle.jpg" alt="images/bottle.jpg"/>
            <img src="images/pattern.jpg" alt="images/pattern.jpg"/>
            </div>

            <div id="box3" class="box">
            <img src="images/car.jpg" alt="images/car.jpg"/>
            <img src="images/van.jpg" alt="images/van.jpg"/>
            </div>
    </div>

cssでは、コンテナはposition：absoluteです。

簡単な解決策があると確信していますが、stackoverflowや他のサイトを検索しても役に立ちませんでした。どんな助けでも大歓迎です!!!!

4

1 に答える 1

0

私はこの例を作りました：

http://jsfiddle.net/oceog/YHLz2/11/

$(function() {
    $('.box').each(function() {
        var $this = $(this);
        $this.cycle({
            fx: 'fade',
            speed: 300,
            timeout: 0,
            next: $this,
            pause: 1
        });
    });
});​

期待どおりに機能します。あなたもそうです。古いjqueryを使用している可能性がありますか？（現在は1.8）

答えが問題に合わない場合は、jsfiddleを編集して問題の場所を示してください。

  • ページをロードするとき
  • index.htmlにリンクされているロゴをクリックすると

ページをロードするときは、 index.htmlではなく、index.htm、index.phpなどをロードするときに、サイトディレクトリを確認してください。

jsfiddleは、構造を表示するだけでなく、問題を繰り返す必要があります

インターネット上のあなたのサイトの場合-私にリンクを教えてください、そして私はチェックします

コードを次のように変更してみてください。

   $(document).load(function() {
    $('.box').each(function() {
        var $this = $(this);
        $this.cycle({
            fx: 'fade',
            speed: 300,
            timeout: 0,
            next: $this,
            pause: 1
        });
    });
});​
于 2012-10-21T23:54:02.163 に答える