jQuery 使用按钮的水平滚动div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8561124/
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 using buttons
提问by GSTAR
How can I set left and right buttons on a DIV to scroll the content horizontally? I don't need to display a scrollbar.
如何在 DIV 上设置左右按钮以水平滚动内容？我不需要显示滚动条。
HMTL:
HMTL：
<div id="browser">
<a href="#" id="left-button"><img src="left-button.jpg" /></a>
<img src="thumb_1.jpg" />
<img src="thumb_2.jpg" />
<img src="thumb_3.jpg" />
<img src="thumb_4.jpg" />
<img src="thumb_5.jpg" />
<img src="thumb_6.jpg" />
<a href="#" id="right-button"><img src="right-button.jpg" /></a>
</div>
CSS:
CSS：
#browser { float: left; width: 200px; overflow: hidden; white-space: nowrap; }
回答by Patches
Do:
做：
<div id="browser">
<a href="#" id="left-button"><img src="left-button.jpg" /></a>
<div id="content">
<img src="thumb_1.jpg" />
<img src="thumb_2.jpg" />
<img src="thumb_3.jpg" />
<img src="thumb_4.jpg" />
<img src="thumb_5.jpg" />
<img src="thumb_6.jpg" />
</div>
<a href="#" id="right-button"><img src="right-button.jpg" /></a>
</div>
<script>
$('#right-button').click(function() {
event.preventDefault();
$('#content').animate({
marginLeft: "-=200px"
}, "fast");
});
</script>
Then the same for the left button, except - marginLeft: +="200px".
然后左侧按钮相同，除了 - marginLeft: +="200px"。
回答by NOTSermsak
Here is the code that you want. It's proved that works on IE, Safari, Chrome, Firefox, etc.
这是您想要的代码。事实证明，它适用于 IE、Safari、Chrome、Firefox 等。
Here is the HTML part.
这是 HTML 部分。
<div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;">
<div id="inner-wrap" style="float:left;">
<!-- 'Put Inline contains here like below.' -->
<div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
<!-- ... -->
<div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
<!-- 'Put Inline contains here like above.' -->
</div>
<div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px; margin-top:40px">
<img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/>
</div>
<div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px">
<img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/>
</div>
</div>
Here is jQuery part in JavaScript function.
这是 JavaScript 函数中的 jQuery 部分。
function scrollThumb(direction) {
if (direction=='Go_L') {
$('#slide-wrap').animate({
scrollLeft: "-=" + 250 + "px"
}, function(){
// createCookie('scrollPos', $('#slide-wrap').scrollLeft());
});
}else
if (direction=='Go_R') {
$('#slide-wrap').animate({
scrollLeft: "+=" + 250 + "px"
}, function(){
// createCookie('scrollPos', $('#slide-wrap').scrollLeft());
});
}
}
For hiding the arrows please looking here. Detect end of horizontal scrolling div with jQuery
要隐藏箭头，请看这里。使用jQuery检测水平滚动div的结束
回答by Briganti
you can try this: - make a "mask div" and set the position relative, set the width, and overflow hidden. - make a content div inside the mask div and set position fix
你可以试试这个： - 制作一个“mask div”并设置相对位置，设置宽度，并隐藏溢出。- 在掩码 div 内创建一个内容 div 并设置位置修复
Now you can put two button: left and right, and you need to modifiy only the content div's left value
现在你可以放两个button：left和right，你只需要修改内容div的left值
Similar as Patches solution :)
类似于补丁解决方案:)
