如何使用左右按钮滚动div水平

Question

我有一个名为portfolio-items的类，它将在水平滚动。 我需要jQuery ，这可以帮助我使用我的下一个和前一个按钮滚动到下一个和上一个最近的类。 需要它更具体，如点击我的按钮，它需要获得我最近的div的位置，并相应向左或向右滚动。

下面是我的代码

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

.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;
}

请检查我的小提琴演示

谢谢。

Answer 1

尝试

$(document).ready(function(){
    $(".arrow-left").click(function(){
        $(".offer-pg-cont").animate({scrollLeft: "-="+100});
    });
    $(".arrow-right").click(function(){
        $(".offer-pg-cont").animate({scrollLeft: "+="+100});
    });        
});

演示http://jsfiddle.net/xQh5J/177/

你可以通过以下方式检测宽度：

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"));

并编辑代码

$(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});
    });        
});

演示http://jsfiddle.net/xQh5J/180/

Answer 2

我写了几行并分叉你的小提琴： http ： //jsfiddle.net/jbrosi/c6kf2/ （我也不小心更新了你的 - 对不起）。

如果您通过容器中的鼠标滚轮或键盘手动滚动，此解决方案不会中断，它也应该尊重不同大小的项目（只需确保您的容器足够大，以便它们保持在一行中）。

$(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);


});

更新 ：编辑代码，使其在到达第一个/最后一个项目时循环

Answer 3

如果这是缩略图滚动条，您可以使用此插件或此

你也可以自定义它，希望能帮到你:)

Answer 4

你可以尝试下面的代码：

演示

$(".arrow-left").click(function(){
    $(".offer-pg-cont").animate({scrollLeft: "-="+110});
});
$(".arrow-right").click(function(){
    $(".offer-pg-cont").animate({scrollLeft: "+="+110});
});