如何使用左右按鈕滾動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});
});