1

4つのアイコンとその下に小さな円があるモバイルスライダー用に作成したいと思います。これは、4つのアイコンが変わるたびに変わります（spiweでも機能するはずです） 。FlexSliderhttp ://flexslider.woothemes.com/indexで見つけて例を示し ます。 html

画像のリストをindex.htmlページに作成し、CSSファイルを追加します

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>

index.htmlのjavaScript関数

 $(document).ready(function () {
                  $('.flexslider').flexslider({
                      animation: "slide",
                      animationLoop: false,
                      itemWidth: 80,
                      itemMargin: 5
                  });
              });

しかし、それはサイトのように機能しておらず、画像のない白い列を設定しています...私の間違いはどこにありますか？

4

1 に答える 1

1

Document readyページの読み込みを処理jQuery Mobileする方法のため、と一緒に使用することはできません。jQuery Mobile

ページ イベントの詳細については、ドキュメント準備完了との違いについて、このARTICLEを参照するか、こちらを参照してください。

作業jsFiddle例: http://jsfiddle.net/Gajotres/CPpBD/

基本的に、これを変更するだけです：

$(document).ready(function () {
    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 80,
        itemMargin: 5
    });
});

これに：

$(document).on('pageshow', '#index', function(){       
    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false
    });
});

pageshowこの回答の最初に投稿したリンクで、イベントの詳細を読むことができます。

于 2013-03-14T16:14:16.747 に答える