javascript 如何使用左右按钮水平滚动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25076940/
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
How the get scroll the div horizontal using left and right buttons
提问by Benjamin
I have a class called portfolio-itemswhere it will scroll horizontal. I need jQuerywhich helps me to scroll to the next and previous closest classes using my next and previous buttons. Need it more specific like on click my buttons it need the get the position of my closest div and scroll accordingly left or right.
我有一个名为portfolio-items的类，它将水平滚动。我需要jQuery它帮助我使用下一个和上一个按钮滚动到下一个和上一个最接近的类。需要它更具体，例如单击我的按钮，它需要获取我最近的 div 的位置并相应地向左或向右滚动。
Below Is my code
下面是我的代码
MARKUP
标记
<span class='arrow-left'>left</span>
<span class='arrow-right'>right</span>
<div class='row offer-pg-cont'>
<div class='offer-pg'>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
</div>
</div>
CSS
CSS
.offer-pg-cont{
width: 100%;
overflow-x: auto;
margin: 0px;
}
span.arrow-left,span.arrow-right{
display: block;
position: absolute;
background-color: #555;
top: 40px;
color:white;
z-index: 2;
cursor: pointer;
}
span.arrow-left{
left: 0px;
}
span.arrow-right{
right: 0px;
}
span.arrow-left:hover,.offer-pg span.arrow-right:hover{
background-color: #333;
}
.offer-pg{
width: 1500px;
}
.item-wrapper.offer-con{
background-color: #333 !important;
}
.offer-con .left-item h4 {
color: #fff;
font-weight: normal;
margin: 0px;
}
.offer-con .right-item{
float: right;
padding: 10px;
}
.offer-con .right-item h5{
color: #cb9944;
margin: 0px;
font-size: 14px;
}
.offer-pg > .portfolio-item{
width: 100px;
background-color:blue;
margin-left:10px;
float:left;
}
Please check my fiddle DEMO
请检查我的小提琴演示
Thanks.
谢谢。
采纳答案by jbrosi
I wrote a few lines and forked your fiddle: http://jsfiddle.net/jbrosi/c6kf2/(I also accidentally updated yours - sorry for that).
我写了几行并分叉了你的小提琴：http: //jsfiddle.net/jbrosi/c6kf2/（我也不小心更新了你的 - 抱歉）。
This solution won't break if you manually scroll via mousewheel or keyboard in the container and it should respect items with varying sizes, too (just make sure your container is big enough for them to stay in one line).
如果您在容器中通过鼠标滚轮或键盘手动滚动，此解决方案不会中断，并且它也应该尊重不同大小的项目（只需确保您的容器足够大，以便它们保持在一行中）。
$(document).ready(function() {
//cache our items and containers
var items = $(".portfolio-item");
var scrollContainer = $(".offer-pg-cont");
/**
* Fetches the next or previous item from items
*
* @param conntainer {JQueryElement} scroll-container in which the items can be found
* @param items {Array} items to be searched through
* @param isNext {boolean} set to true (default) if you want the next item, to false if you want the previous one
* @returns {*}
*/
function fetchItem(container, items, isNext) {
var i,
scrollLeft = container.scrollLeft();
//set isNext default to true if not set
if (isNext === undefined) {
isNext = true;
}
if (isNext && container[0].scrollWidth - container.scrollLeft() <= container.outerWidth()) {
//we reached the last one so return the first one for looping:
return $(items[0]);
}
//loop through items
for (i = 0; i < items.length; i++) {
if (isNext && $(items[i]).position().left > 0) {
//this item is our next item as it's the first one with non-negative "left" position
return $(items[i]);
} else if (!isNext && $(items[i]).position().left >= 0) {
//this is our previous item as it's the one with the smallest negative "left" position
//if we're at item 0 just return the last item instead for looping
return i == 0 ? $(items[items.length - 1]) : $(items[i-1]);
}
}
//nothing found
return null;
}
/**
* Moves the scrollcontainer to the next/previous item (depending on event.data.direction).
*
* @param event
*/
function moveToItem(event) {
//fetch the next/previous item:
var isNext = event.data.direction == "next";
var item = isNext ? fetchItem(scrollContainer, items, true) : fetchItem(scrollContainer, items, false);
if (item) {
//scroll to item
scrollContainer.animate({"scrollLeft": item.position().left + scrollContainer.scrollLeft()}, 400);
}
}
//bind events
$(".arrow-left").click({direction: "prev"}, moveToItem);
$(".arrow-right").click({direction: "next"}, moveToItem);
});
Update: Edited the code so it loops when reaching first / last item
更新：编辑代码，使其在到达第一个/最后一个项目时循环
回答by HDT
try
尝试
$(document).ready(function(){
$(".arrow-left").click(function(){
$(".offer-pg-cont").animate({scrollLeft: "-="+100});
});
$(".arrow-right").click(function(){
$(".offer-pg-cont").animate({scrollLeft: "+="+100});
});
});
demo http://jsfiddle.net/xQh5J/177/
演示http://jsfiddle.net/xQh5J/177/
exactly you can detect width one item by :
确切地说，您可以通过以下方式检测宽度一项：
var widthOneItem = parseInt($(".col-md-3").first().css("width"))+parseInt($(".col-md-3").first().css("margin-left"))+parseInt($(".col-md-3").first().css("margin-right"))+parseInt($(".col-md-3").first().css("padding-left"))+parseInt($(".col-md-3").first().css("padding-right"));
And edit code
并编辑代码
$(document).ready(function(){
var widthOneItem = parseInt($(".col-md-3").first().css("width"))+parseInt($(".col-md-3").first().css("margin-left"))+parseInt($(".col-md-3").first().css("margin-right"))+parseInt($(".col-md-3").first().css("padding-left"))+parseInt($(".col-md-3").first().css("padding-right"));
$(".arrow-left").click(function(){
$(".offer-pg-cont").animate({scrollLeft: "-="+widthOneItem});
});
$(".arrow-right").click(function(){
$(".offer-pg-cont").animate({scrollLeft: "+="+widthOneItem});
});
});
![javascript 在javascript中显示实际的[object Object]](/res/img/loading.gif)