如何使用循环缩略图滑动

Question

我想要上一个和下一个clik logoimage是左右滑动。这个图像是循环... 我想要这张幻灯片.. http://zeroturnaround.com/

<div class="thumbnailgallery" >
  <div class="showrooms clearfix">
    <a href="" class="logo"><img src="images/top/best-auto.jpg">1</a> 
    <a href="" class="logo"><img src="images/top/cheap-car.jpg">2</a>
    <a href="" class="logo"><img src="images/top/cosmo.jpg">3</a>
    <a href="" class="logo"><img src="images/top/golden.jpg">4</a>
    <a href="" class="logo"><img src="images/top/ID.jpg">5</a>
    <a href="" class="logo"><img src="images/top/kia.jpg">6</a>
    <a href="" class="logo"><img src="images/top/maxano.jpg">7</a>
    <a href="" class="logo"><img src="images/top/mmm.jpg">8</a>
    <a href="" class="logo"><img src="images/top/nihon.jpg">9</a>
    <a href="" class="logo"><img src="images/top/sakura.jpg">10</a>
    <a href="" class="logo"><img src="images/top/shwe.jpg">11</a>
    <a href="" class="logo"><img src="images/top/symcar.jpg">12</a>
    <a href="" class="logo"><img src="images/top/theingi.jpg">13</a>
    <a href="" class="logo"><img src="images/top/thuhtetpyisone.jpg">14</a>
    <a href="" class="logo"><img src="images/top/uno-korea.jpg">15</a>
    </div><!-- End Showrooms -->
</div> <!-- End items -->
<span  class="arrowleft" id="prev"><i class="icon-chevron-left"></i></span>
<span  class="arrowright" id="next"><i class="icon-chevron-right"></i></span>

我有这个问题......

和

看到这个网站 http://zeroturnaround.com/

如何使用jquery ......

我的jfiddle http://jsfiddle.net/kisspa/kyF8u/1/

Answer 1

1. 您的图片尺寸为70，但递增/递减100。
2. 删除第一个和最后一个项目的克隆，然后修复第15个/第一个图像

Answer 2

如果你想拥有的只是样本页面之类的行为，那么非常简单，你可以在点击前添加/追加.logo元素，如下所示：

$('#prev').on('click', function () {
    var last = $('.logo').last();
    last.prependTo('.showrooms');
});
$('#next').on('click', function () {
    var first = $('.logo').first();
    first.appendTo('.showrooms');
}); 

这是 Fiddle Demo 。

P.S。如果将徽标设置为向左浮动并为.showrooms提供设置宽度内的设置高度，则将获得更好的结果（以及具有响应能力的滑块）。这将使您不必使用white-space：nowrap，这将产生奇怪的间距问题。

正如我所说，另一个好处是，将.showrooms设置为百分比宽度，它现在可以很好地适应窗口/视口大小。

编辑：

添加了一些动画并更新了小提琴。有很多方法可以做到这一点，包括动画元素的左侧位置，所以你必须四处游戏才能获得你想要的行为。

$('#prev').on('click', function () {
    var last = $('.logo').last().css({opacity: '0', width: '0px'});
    last.prependTo('.showrooms');
    last.animate({opacity: '1', width: '108px'});
});
$('#next').on('click', function () {
    var first = $('.logo').first();
    first.animate({opacity: '0', width: '0px'}, function() {
        //this callback only runs after the animation is completed
        //for the next you need to animate out THEN append the item 
        //and reset its css properties:
        first.appendTo('.showrooms').css({opacity: '1', width: '108px'});
    });
});