使用按钮的水平滚动div [英] Horizontal scrolling div using buttons
本文介绍了使用按钮的水平滚动div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在DIV上设置左右按钮以水平滚动内容?我不需要显示滚动条.
How can I set left and right buttons on a DIV to scroll the content horizontally? I don't need to display a scrollbar.
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:
#browser { float: left; width: 200px; overflow: hidden; white-space: nowrap; }
推荐答案
执行:
<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>
然后,除了-marginLeft:+ ="200px"以外,其余按钮均相同.
Then the same for the left button, except - marginLeft: +="200px".
这篇关于使用按钮的水平滚动div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文