如何使用图像幻灯片jquery。我想右箭头是单击一个图像右移动和左箭头单击一个图像左移动

Question

如何使用图片幻灯片jquery。我想要的是右键单击一个图像向右移动，左键单击一个图像向左移动.....

       <div class="showrooms clearfix">
            <a href="" class="logo"><img src="images/top/best-auto.jpg">Best Auto</a> 
            <a href="" class="logo"><img src="images/top/cheap-car.jpg">Cheap Car</a>
            <a href="" class="logo"><img src="images/top/cosmo.jpg">Cosmo</a>
            <a href="" class="logo"><img src="images/top/golden.jpg">Golden</a>
            <a href="" class="logo"><img src="images/top/ID.jpg">ID</a>
            <a href="" class="logo"><img src="images/top/kia.jpg">KIA</a>
            <a href="" class="logo"><img src="images/top/maxano.jpg">MAXANO</a>
            <a href="" class="logo"><img src="images/top/mmm.jpg">MMM</a>
            <a href="" class="logo"><img src="images/top/nihon.jpg">Nihon</a>
            <a href="" class="logo"><img src="images/top/sakura.jpg">Sakura</a>
            <a href="" class="logo"><img src="images/top/shwe.jpg">Shwe</a>
            <a href="" class="logo"><img src="images/top/symcar.jpg">SYM</a>
            <a href="" class="logo"><img src="images/top/theingi.jpg">Theingi</a>
            <a href="" class="logo"><img src="images/top/thuhtetpyisone.jpg">Thuhtetpyisone</a>
            <a href="" class="logo"><img src="images/top/uno-korea.jpg">UNO-Korea</a>
            <span class="arrowleft">left</span>
            <span class="arrowright">right</span>
      </div><!-- End Showrooms -->

jquery的

$(".arrowleft").click(function(){
        // i wanted logo image is slide left
});

$(".arrowright").click(function(){
   // i wanted logo image is slide right
});

请参阅http://jsfiddle.net/kisspa/cggLe/1/

Answer 1

你试过这个名为flexslider的插件吗？

非常好，可以做你想做的事，也是非常可配置的。您可以将其设置为一次左右移动一个图像。

要使用轮播一次移动1，请在下载后按照自述文件中的设置说明进行操作：

// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4,
    move: 1
  });
});

上面代码中的最后一行：move: 1可让您将数字更改为您想要移动的项目数。例如move: 2或move: 3。

Answer 2

基本向右/向左移动：http://jsfiddle.net/cggLe/3/ ...没有停止，没有动画

添加了一个外部容器：

.container {
    width:500px;
    overflow:hidden;
    position:relative;
    border:1px solid blue;
}
.showrooms {
    white-space:nowrap;
    position:relative;
    margin-bottom:40px;
    left:0;
}

但是对于花哨的结果，请尝试使用galery插件，例如“Jssor Slider”......只需在Google上搜索“jquery gallery”