0

私はこれを数日間理解しようとしてきましたが、前進することはできません. 画像をスクローラーとして使用して単純な左右のスクロールを実行しようとしていますが、うまく動作しないようです。ここに私のコードがあります: http://jsfiddle.net/7GrTM/1/

HTML

<div class="outerwrapper">
   <div class="innerwrapper">
     <div class="productsbox">
          <img class="box_image" src="images/productsbox1.png" style="width:222px" alt="this"/>
     </div>
     <div class="spacer"></div>
     <div class='productsbox'>  
          <img class='box_image' src="images/productsbox2.png" style='width:222px' alt="this"/>
     </div>
     <div class="spacer"></div>
     <div class='productsbox'>  
          <img class='box_image' src="images/productsbox3.png" style='width:222px' alt="this"/>                      
     </div>
     <div class="spacer"></div>
     <div class='productsbox'>  
          <img class='box_image' src="images/productsbox4.png" style='width:221px' alt="this"/>  
    </div>
    <div class="spacer"></div>
    <div class='productsbox'>  
         <img class='box_image' src="images/productsbox5.png" style='width:221px' alt="this"/>  
    </div>
    <div class="spacer"></div>
    <div class='productsbox'>  
         <img class='box_image' src="images/productsbox6.png" style='width:221px' alt="this"/>
    </div>
  </div>
</div>
    <div class="productspace">
        <img src="images/arrowleft.png" id="#left" alt="left"/>
        <img src="images/arrowright.png" id="#right" style="padding-left: 10px;" alt="right"/>
    </div>

JS

$(function () {

    $("#right, #left").click(function () {
        var dir = this.id == "right" ? '+=' : '-=';
        $("#outerwrapper").stop().animate({ scrollLeft: dir + '422' }, 1000);
    });

});

CSS

.spacer {
    width: 20px;
    height: 319px;
    display: inline-block;
}

.outerwrapper {
    margin: 0px auto;
    width: 1050px;
    height: 323px;
    display: inline-block;
    overflow: hidden;
}

.innerwrapper {
    width: 1600px;
    height: 322px;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

どんな助けでも感謝します。

4

1 に答える 1

1

ID が間違っています。単純に#leftandではなく、 andという名前を付けています。JSfiddle で、これを id:およびとして設定することができました。#rightleftright#left1#right1

解決策: ID を and に変更するleftとright、次のようになります。

<div class="productspace">
    <img src="images/arrowleft.png" id="left" alt="left"/>
    <img src="images/arrowright.png" id="right" style="padding-left: 10px;" alt="right"/>
</div>

outerwrapperまた、 classを としてでidはなく としてdiv にアクセスしようとしていますclass。アウターラッパーを ID に<div id="outerwrapper">変更するか、jquery を変更してクラスを検索します$(".outerwrapper")(私の考えでは、前の解決策の方が優れているので、div id を変更します)。

于 2013-08-29T19:50:31.373 に答える