[英]Jquery horizontal Scroll using buttons
我試圖使用按鈕獲得水平滾動。
我有一個容器,它有幾個水平堆疊的div,我想用給定的按鈕滾動它們。
請看看我的嘗試並告訴我我做錯了什么。
HTML:
<div class="left">
left div
<button id="left-button">
swipe left
</button>
</div>
<div class="center" id="content">
<div class=internal>
div 1
</div>
<div class=internal>
div 2
</div>
<div class=internal>
div 3
</div>
<div class=internal>
div 4
</div>
<div class=internal>
div 5
</div>
<div class=internal>
div 6
</div>
<div class=internal>
div 7
</div>
<div class=internal>
div 8
</div>
</div>
<div class="right">
<button id="right-button">
swipe right
</button>
right div
</div>
JQUERY:
$('#right-button').click(function() {
event.preventDefault();
$('#content').animate({
marginLeft: "+=200px"
}, "slow");
});
$('#left-button').click(function() {
event.preventDefault();
$('#content').animate({
marginLeft: "-=200px"
}, "slow");
});
http://plnkr.co/edit/GxufhJaRJn2SfGb4ilIl?p=preview
我嘗試過在網上找到的解決方案。 但即使我正在嘗試修復它,我的容器也在不停變換。
$('#right-button').click(function() {
event.preventDefault();
$('#content').animate({
scrollLeft: "+=200px"
}, "slow");
});
$('#left-button').click(function() {
event.preventDefault();
$('#content').animate({
scrollLeft: "-=200px"
}, "slow");
});
編輯,解釋......你需要設置其向左滾動位置。
您正在尋找scrollLeft
而不是marginLeft
:
$('#right-button').click(function() {
event.preventDefault();
$('#content').animate({
scrollLeft: "+=200px"
}, "slow");
});
$('#left-button').click(function() {
event.preventDefault();
$('#content').animate({
scrollLeft: "-=200px"
}, "slow");
});
@Vennik的答案真的很棒,
但在我的情況下,我使用它有點不同,因為我使用Material Design並正在進行API調用以顯示Image Carousal,
我是這樣做的,
第一部分是Carousel或Slider代碼,第二部分是JS代碼
<!-- Carousel -->
<span style="cursor:pointer" id="left-button"><i class="material-icons">keyboard_arrow_left</i></span> 
<span style="cursor:pointer" id="right-button"> <i class="material-icons">keyboard_arrow_right</i></span>
<div class="bill-screens mdl-shadow--4dp" id="offer-pg-cont">
<?php for($t=0; $t< count($arr_get_a_user['categories']);$t++){?>
<div class="bill-pic bill-screen">
<button class="bill_class" id="bill_<?php echo $t ?>" onClick="display_image()">
<img class="bill-screen-image" src="<?php echo $btn_img1; ?>">
</button>
</div>
<?php }?>
</div>
. . . . . . . . . .
<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
// Carausol JS
$('#right-button').click(function() {
event.preventDefault();
$('#offer-pg-cont').animate({
scrollLeft: "+=200px"
}, "slow");
});
$('#left-button').click(function() {
event.preventDefault();
$('#offer-pg-cont').animate({
scrollLeft: "-=200px"
}, "slow");
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.