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

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

1 个答案: