如何使用图像幻灯片 jquery。我想要右箭头是单击一个图像右移，左箭头是单击一个图像左移答案

【问题标题】：how use image slide jquery. i wanted rightarrow is click one image right move and leftarrow is click one image left move如何使用图像幻灯片 jquery。我想要右箭头是单击一个图像右移，左箭头是单击一个图像左移
【发布时间】：2014-07-03 20:31:52
【问题描述】：

如何使用图片幻灯片 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/

【问题讨论】：

标签： jquery css

【解决方案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 。

【讨论】：

虽然答案是正确的，但你会受到它的能力的严重限制。

【解决方案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;
}

但要获得精美的结果，请尝试使用图库插件，例如“Jssor Slider”...只需在 Google 上搜索“jquery gallery”

【讨论】：