1

このスライダーを使用しましたが、私の好みに合わないディテールがあります。

問題は、最後の境界線を表示しないようにしたいのですが、スライダーに移動したときに更新したいので、表示されていない最も右側の境界線のみを取得します。

つまり、たとえば、これは最初のスライドです:a|b|c|d|そして、私がしたいa|b|c|d、次に、右矢印をクリックすると、取得したいb|c|d|a(最後の境界線 "|" なし)。

私が実際に何を意味するのかをうまく説明できれば幸いです:)

http://jsfiddle.net/5AdgA/1/

4

6 に答える 6

1

これらはあなたの要素です

 <ul id="box_ul">
   <li><a href="#">a</li>
   <li><a href="#">b</li>
   <li><a href="#">c</li>
   <li><a href="#">d</li>
</ul>

最後の要素から境界線を削除するには、次のように css を使用するだけです。

box_ul li:last-child { border-right: 0 }

#box ul li{} this style rule の後に次の行 (css ルール) を配置してください。

ありがとう。

于 2012-11-19T11:36:57.633 に答える
0

ここでJSFiddle を更新して、その動作方法を示しました。

基本的に、更新ごとに、last-childクラスを :last li に追加します。jQuery でこれを行い、CSS 疑似セレクターを使用しない理由は、純粋にブラウザーのサポートのためです。IE 6/7/8 のようなブラウザーをサポートする必要がある場合は、これがその方法です。

于 2012-11-19T11:31:37.977 に答える
0

border-rightを aborder-leftに切り替えてから:first-child. を使用できますlast-childがfirst-child、IE8 でもサポートされています。

http://jsfiddle.net/amustill/5AdgA/6/

于 2012-11-19T11:32:40.383 に答える
0

あなたはこのようにすることができます

$(document).ready(function() {
    $('#box_ul li:first').before($('#box_ul li:last')); 
    $('#box_ul li').css('border-right','1px solid #d5d5d5');
    $('#box_ul li:last').css('border-right','none');
   $('#right_scroll_clienti').click(function(){
       var item_width = $('#box_ul li').outerWidth() + 10;
       var left_indent = parseInt($('#box_ul').css('left')) - item_width;
       $('#box_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
            $('#box_ul li:last').after($('#box_ul li:first')); 
            $('#box_ul').css({'left' : '0px'});
           $('#box_ul li').css('border-right','1px solid #d5d5d5');
    $('#box_ul li:last').css('border-right','none');
       }); 

   });
   $('#left_scroll_clienti').click(function(){
       var item_width = $('#box_ul li').outerWidth() + 10;
       var left_indent = parseInt($('#box_ul').css('left')) + item_width;
       $('#box_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
            $('#box_ul li:first').before($('#box_ul li:last')); 
            $('#box_ul').css({'left' : '0px'});
           $('#box_ul li').css('border-right','1px solid #d5d5d5');
    $('#box_ul li:last').css('border-right','none');
       });
    });
});​

デモ

于 2012-11-19T11:33:21.997 に答える
0

これがあなたのニーズを満たしているかどうかを確認してください：http://jsfiddle.net/5AdgA/9/

css プロパティをいくつか変更し、ul の div を 1 つ追加しました

  .slidewrapper{width:935px; overflow:hidden;} //added on css class for the slider and some little changes, not much.
于 2012-11-19T11:36:54.597 に答える
-1 
#box ul li:last-of-type{
    border-right: 0;
}
于 2012-11-19T11:29:36.227 に答える