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 }

只需确保将这一行（css 规则）放在：#box ul li{} this style rule 之后

谢谢。

于 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-childIE8 也支持。

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

  .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 回答