0

私はここにjsfiddleを持っています - http://jsfiddle.net/ZrHfu/1/

デモはこちら - http://www.ttmt.org.uk/forum/thumb_test/

レスポンシブ サムネイル カルーセルを作成しようとしています - これを行うためのプラグインを見てきましたが、それらはすべて同じサイズの画像が必要です。異なるサイズの画像が必要です。

これは非常に基本的なものです - 画像のリストが左にフロートし、オーバーフロー: コンテナに隠されています。

左/右のボタンがあり、ボタンをクリックすると、画像を左/右に移動しようとしています。

右ボタンのみ接続。

私の問題は、一度しか機能しないことです。

右のボタンをクリックすると画像が左に移動し、もう一度クリックしても何も起こりません。

なぜ一度しか機能しないのですか。

    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <title>Title of the document</title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

      <link rel="stylesheet" href="css/master.css" />

      </head>

    <body>


        <a class="arrow left">&larr;</a>

        <div class="thumbs">

          <ul>

            <li><a href="#"><img alt="" src="images/01.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/02.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/03.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/04.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/05.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/06.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/07.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/08.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/09.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/10.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/11.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/12.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/13.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/14.jpg" /></a></li>
            <li><a href="#"><img alt="" src="images/15.jpg" /></a></li>

          </ul>
        </div>

        <a class="arrow right">&rarr;</a>


        <script src="js/hel.js"></script>

    </body>

    </html>
4

1 に答える 1

1

右ボタンをクリックすると、.thumbsクラス divの幅をul要素の左に適用しているため、画像は左に移動します。そして、2回目は、すでに要素に左に設定されている同じ幅を適用しようとしていますul。これが、何も起こらない理由です。

解決策:要素 の左の値を取得してクラスulの幅に追加し、値を関数に適用する必要があります。.thumbsanimate

コードを更新してさらに移動しました。ご覧ください: http://jsfiddle.net/ZrHfu/2/

于 2013-04-30T15:11:17.457 に答える