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

我有一个名为公文包项目的类，它将在其中水平滚动。我需要

jQuery

，它可以帮助我使用“下一个”和“上一个”按钮滚动到下一个和上一个最近的类。需要它更具体，如点击我的按钮，它需要得到我最近的div的位置，并相应地向左或向右滚动

下面是我的代码

标记

<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>

请检查我的小提琴

谢谢。

试试看

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

演示

准确地说，您可以通过以下方式检测一个项目的宽度：

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

---

演示

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

---

您也可以自定义它，希望这对您有所帮助：）

您可以尝试以下代码：

---

我写了几行，把你的提琴叉了起来：（我也不小心更新了你的提琴，对此我很抱歉）

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

$（文档）.ready（函数（）{
//缓存我们的物品和容器
var项目=$（“.portfolio项目”）；
var scrollContainer=$（“.offer pg cont”）；
/**
*从项目中获取下一个或上一个项目
*
*@param conntainer{JQueryElement}可以在其中找到项目的滚动容器
*@param items{Array}要搜索的项目
*@param isNext{boolean}如果需要下一项，则设置为true（默认值）；如果需要上一项，则设置为false
*@returns{*}
*/
函数fetchItem（容器、项、isNext）{
var i，
scrollLeft=容器。scrollLeft（）；
//如果未设置，则将isNext default设置为true
如果（isNext==未定义）{
isNext=true；
}
if（isNext&&container[0].scrollWidth-container.scrollLeft（）0）{
//这个项目是我们的下一个项目，因为它是第一个非负“左”位置的项目
返回美元（项目[i]）；
}如果（！isNext&&$（items[i]）.position（）.left>=0，则为else{
//这是我们之前的项目，因为它是一个最小的负“左”位置
//如果我们在项目0，只返回最后一个项目，而不是循环
返回i==0？$（items[items.length-1]）：$（items[i-1]）；
}
}
//什么也没找到
返回null；
}
/**
*将scrollcontainer移动到下一个/上一个项目（取决于event.data.direction）。
*
*@param事件
*/
函数moveToItem（事件）{
//获取下一个/上一个项目：
var isNext=event.data.direction==“next”；
var item=isNext？fetchItem（scrollContainer，items，true）：fetchItem（scrollContainer，items，false）；
如果（项目）{
//滚动到项目
动画（{“scrollLeft”：item.position（）.left+scrollContainer.scrollLeft（）}，400）；
}
}
//绑定事件
$（“.arrow left”）。单击（{direction:“prev”}，moveToItem）；
$（“.arrow right”）。单击（{direction:“next”}，moveToItem）；
});

---

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

嘿，谢谢，但需要更具体的代码，如单击“下一步”或“上一步”按钮，它需要获取最近div的位置并滚动到div的准确左或右是很高兴帮助你：）如果你愿意，你可以用parseInt解释变量中得到了什么吗理解一个元素的外部宽度=（css宽度）+（css左边距和右边距）+（css左边距和右边距）ParseInt帮助您将其转换为intergerLet us。@Suresponnukalai:请检查我的链接，我想您已经做了一些更改。干杯，伙计，它对我有用。一旦它到达最后一个投资组合，您将能够循环它，并循环到第一个投资组合。您的愿望可能很愉快！更新了代码，以便在到达边界时项目应循环。

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

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

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


});