使用 javascript 或 jquery 水平滚动 div onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6835054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
horizontal scrolling div onclick with javascript or jquery
提问by Chad
I have spent the last two days looking for a simple javascript or jquery code for this. I want to incorporate a horizontal scrolling div using javascript or jquery to display images and descriptive text for the work page of my web portfolio.
过去两天我一直在为此寻找一个简单的 javascript 或 jquery 代码。我想使用 javascript 或 jquery 合并一个水平滚动 div 来显示我的网络投资组合的工作页面的图像和描述性文本。
It would function very similar to the glide-onclick scrolling shown here: http://www.dyn-web.com/code/scroll/demos.php#horizUnfortunately that code license is $40, and I am a broke student.
它的功能与此处显示的 glide-onclick 滚动非常相似：http: //www.dyn-web.com/code/scroll/demos.php#horiz不幸的是，代码许可证是 40 美元，而我是一个破产的学生。
On loading of the page, three portfolio images will be shown. Extras are hidden in the overflow to the right. Onclick of a left arrow (I can create), a new image slide comes into view from the right. A right arrow click sends it back into overflow. I don't want scrollbars, just arrows controlling the slides.
加载页面时，将显示三个投资组合图像。额外内容隐藏在右侧的溢出中。单击左箭头（我可以创建），从右侧可以看到新的图像幻灯片。单击右箭头将其送回溢出。我不想要滚动条，只想要控制幻灯片的箭头。
Any help is much appreciated. Thanks.
任何帮助深表感谢。谢谢。
采纳答案by Peter Munnings
You can just use code like this:
你可以使用这样的代码：
function FixMargin(left) {
$(this).css("left", left);
}
$(document).ready(function () {
$('#rightbutton').click(function () {
var left = parseInt($("#bitToSlide").css('left'), 10);
$("#bitToSlide").animate({ left: left - pageWidth }, 400, FixMargin(left - pageWidth));
});
$('#leftbutton').click(function () {
var left = parseInt($("#bitToSlide").css('left'), 10);
$("#bitToSlide").animate({ left: left + pageWidth }, 400, FixMargin(left + pageWidth));
});
}
where your html looks like this:
您的 html 如下所示：
<div id="slideleft" class="slide">
<div class="inner" id="bitToSlide" style="width:1842px">
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td id="page1" style="width: 614px">
</td>
<td id="page2" style="width: 614px">
</td>
</tr>
</table>
</div>
</div>
and your css looks like this:
你的css看起来像这样：
.slide
{
position:relative;
overflow:hidden;
height:365px;
width:597px;
margin:1em 0;
background-color:#E9ECEF;
border:0px
}
.slide .inner
{
position:absolute;
left:0;
bottom:0;
height:365px;
padding:0px;
background-color:#E9ECEF;
color:#333
}
I wrote the above a really long time ago - so you probably want to update it a bit (replace the table's with div's for example) but it works.
我很久以前写了上面的内容 - 所以你可能想要更新它（例如用 div 替换表格）但它有效。
You obviously need the two buttons on there as well
你显然也需要那里的两个按钮
回答by Cherik
There are a lot of jQuery plugins which allow you to do this very easily. For ex: http://slidesjs.com/
有很多 jQuery 插件可以让你很容易地做到这一点。例如：http: //slidesjs.com/
Hope this helps.
希望这可以帮助。
回答by ChristopheCVB
You can have a look to iscroll 4.
你可以看看 iscroll 4。
You have a scrollTo method or scrollToElement method...
您有一个 scrollTo 方法或 scrollToElement 方法...
回答by ShankarSangoli
You can do something like this. Not tested code but just giving you a hint.
你可以做这样的事情。没有经过测试的代码，只是给你一个提示。
<div id="imageContainer">
<div id="imageWrapper">
<img />
<img />
</div>
<span id="left">Left</span>
<span id="right">right</span>
</div>
var imageWidth = 200;
$("#left").click(function(){
$("#imageWrapper").animate({marginLeft:"-="+imageWidth}, 500);
//Offcourse you need to handle the corner cases when there is not image to move left
});
$("#right").click(function(){
$("#imageWrapper").animate({marginLeft:"+="+imageWidth}, 500);
});
