JQuery图像从右向左滑动，反之亦然

Question

我有一个div，里面有一些图像，我想让其中3个始终可见，但当我单击向左移动按钮时，我想显示右侧的下一个图像，当单击向右按钮时，显示左侧的第一个图像。此处为示例代码。

<div id="goLeft">Left</div>
<div id="images">
   <img id="img1" width="80" height="60" src="1.jpg "></img>
   <img id="img2" width="80" height="60" src="2.jpg "></img>
   <img id="img3" width="80" height="60" src="3.jpg "></img>
   <img id="img4" width="80" height="60" src="4.jpg "></img>
   <img id="img5" width="80" height="60" src="5.jpg "></img>
   <img id="img6" width="80" height="60" src="6.jpg "></img>
   <img id="img7" width="80" height="60" src="7.jpg "></img>
</div>
<div id="goRight">Right</div>

知道吗？

谢谢你的帮助和时间。

Answer 1

据我所知，您很难找到合适的插件。但是，如果这就是图像滑块所需要的全部内容？然后你可以用这个作为例子：

HTML

为了适应任务，我对您的标记做了一些更改（添加了<div id="container">）

<div id="goLeft">Left</div>
<div id="container">
<div id="images">
   <img id="img1" width="80" height="60" src="1.jpg "></img>
   <img id="img2" width="80" height="60" src="2.jpg "></img>
   <img id="img3" width="80" height="60" src="3.jpg "></img>
   <img id="img4" width="80" height="60" src="4.jpg "></img>
   <img id="img5" width="80" height="60" src="5.jpg "></img>
   <img id="img6" width="80" height="60" src="6.jpg "></img>
   <img id="img7" width="80" height="60" src="7.jpg "></img>
</div>
</div>
<div id="goRight">Right</div>

CSS

1） 容器div设置为3个图像的宽度+它们之间的边距（5px）
2） 高度必须为图像的高度
3） overflow:hidden-隐藏滚动条
4） 设置图像div的宽度是为了使所有图像内联

#container
        {
            width:250px;
            height:60px;
                overflow:hidden;
        }
#images
        {
            width:9999px;
        }

Javascript

var margin = 0;
var max_margin =  ($("#images").children().length *80)-255;
$("#goLeft").click(function(){
    if(margin > -max_margin){
        margin = margin - 84;
    $("#images").css("margin-left",margin+"px");
    }
});
$("#goRight").click(function(){
    if(margin <0){
         margin = margin + 84;
    $("#images").css("margin-left",margin+"px");
    }
});

Fiddle 示例