水平向左滚动+；点击jQuery时50px

我试图使用jQuery使左箭头和右箭头在单击时左右滚动+50px，但它似乎只是将页面重置为向左滚动0

$('.left').click(function(){

  $('#container').scrollLeft(0);
}); 
var bb=0;
$('.right').click(function(){
bb++;
    $('#container').scrollLeft(bb*50);

});

这是我的HTML：

<div id="parallax">
    <a href="#" id="test"></a>
</div>

$('.left').click(function(){

  $('#container').scrollLeft(0);
}); 
var bb=0;
$('.right').click(function(){
bb++;
    $('#container').scrollLeft(bb*50);

});

---

任何帮助或见解都将不胜感激。

您需要按照承诺防止

的默认操作，以下是我编写的演示。这是一个粗略的草案，可以使用一些清洁。我还删除了一些与公司相关的东西，可能有一两种风格引用了它们，但除此之外，它应该做你想做的事情

$('.left').click(function(){

  $('#container').scrollLeft(0);
}); 
var bb=0;
$('.right').click(function(){
bb++;
    $('#container').scrollLeft(bb*50);

});

注意：这个演示是为Chrome设计的（样式包括CSS3效果，只有Chrome属性-我写得很快，并不是为了兼容性-可以随意更改和删除/添加任何必要的样式，以使其在其他浏览器中兼容）

$('.left').click(function(){

  $('#container').scrollLeft(0);
}); 
var bb=0;
$('.right').click(function(){
bb++;
    $('#container').scrollLeft(bb*50);

});


文本滑块演示
身体{
背景色：rgb（252）；
}

    .demo {
        font-size: 16px;
        border: 2px solid rgb(200,200,200);
        display: inline-block;
        padding: 15px;
        border-radius: 10px;
        margin: 0px 0px 20px 30px;
    }

    .demo-inner-wrapper {
        width: 200px;
        overflow: hidden;
        border-radius: 5px;
    }

    .demo-outer-wrapper {
        border: 2px solid rgb(200,200,200);
        border-radius: 5px;
        padding: 4px;
        width: 200px;
        overflow: hidden;
        margin: 4px;
    }

    .demo-entry-title {
        white-space: nowrap;
    }

    .arrow {
        display: inline-block;
        margin: 4px;
        border-radius: 5px;
        border: 2px solid rgb(55,190,235);
        background-color: rgb(240,240,240);
        padding: 4px;
        width: 40px;
        text-align: center;
        color: rgb(30,180,230);
        font-weight: bold;
        cursor: pointer;
    }

    .demo-hover {
        background-color: rgb(0,35,100);
        color: rgb(252,252,252);
    }

    .content {
        padding: 8px;
        width: 640px;
        border: 2px solid rgb(200,200,200);
        border-radius: 10px;
    }

    .demo-information {
        font: 16px arial, helvetica, sans-serif;
    }

    .header {
        font-size: 24px;
        font-weight: bold;
        color: rgb(0,35,100);
    }

    .section-header {
        color: rgb(25,100,190);
        font-size: 18px;
        font-weight: bold;
        margin-left: 4px;
    }

    .demo-information p {
        margin-left: 4px;
    }

    .demo-header {
        font: 18px arial, helvetica, sans-serif;
        font-weight: bold;
        color: rgb(0,35,100);
    }  

    .demo-content {
        margin-left: 8px;
        margin-top: 8px;   
    }      
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var $left = $(".left-arrow");
        var $right = $(".right-arrow");
        var $et = $(".demo-entry-title");
        var $demoWrap = $(".demo-inner-wrapper");

        $left.mouseenter(function () {
            $(this).addClass("demo-hover");
            var width = $et.width();
            var marginStr = $et.css("margin-left");
            var margin = parseInt(marginStr.substring(0, marginStr.length - 2));
            console.log(margin, marginStr);
            var scrollTo = $demoWrap.width() - width;
            if (scrollTo < 0) {
                $et.animate({ "margin-left": scrollTo }, (margin - scrollTo) * 10);
                console.log(width, margin, scrollTo, (margin - scrollTo) * 10);
            }
        }).mouseleave(function () {
            $et.stop();
            $(this).removeClass("demo-hover");
        });

        $right.mouseenter(function () {
            $(this).addClass("demo-hover");
            var width = $et.width();
            var marginStr = $et.css("margin-left");
            var margin = parseInt(marginStr.substring(0, marginStr.length - 2));
            console.log(margin, marginStr);
            var scrollTo = $demoWrap.width() - width;
            if (scrollTo < 0) {
                $et.animate({ "margin-left": 0 }, -margin * 10);
                console.log(width, margin, scrollTo, -margin * 10);
            }
        }).mouseleave(function () {
            $et.stop();
            $(this).removeClass("demo-hover");
        });
    });
</script>
</head>
<body>
    <div class="content">
        <div class="demo-information">
            <div class="header">
                Text Slide Demo</div>
            <br />
            <div class="section-header">
                Overview</div>
            <p>
                The demo below is intended to illustrate the use of jQuery and CSS to create a slide
                effect text that is too long for its specified width, rather than wrapping the text
                onto multiple lines. The scripting involved is very light weight, and can easily
                be wrapped up into a jQuery plugin.
            </p>
        </div>
        <br />
        <div class="demo">
            <div class="demo-header">
                Demo:</div>
            <div class="demo-content">
                <div class="demo-outer-wrapper">
                    <div class="demo-inner-wrapper">
                        <span class="demo-entry-title">This is an entry title that is too long for the section,
                            and here is me giving it even more length.</span>
                    </div>
                </div>
                <div class="demo-buttons">
                    <span class="arrow left-arrow">Left</span><span class="arrow right-arrow">Right</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

$('.left').click(function(){

  $('#container').scrollLeft(0);
}); 
var bb=0;
$('.right').click(function(){
bb++;
    $('#container').scrollLeft(bb*50);

});

.demo{
字体大小：16px；
边框：2个实心rgb（200200）；
显示：内联块；
填充：15px；
边界半径：10px；
利润率：0px 0px 20px 30px；
}
.演示内包装{
宽度：200px；
溢出：隐藏；
边界半径：5px；
}
.演示外包装{
边框：2个实心rgb（200200）；
边界半径：5px；
填充：4px；
宽度：200px；
溢出：隐藏；
保证金：4倍；
}
.演示条目标题{
空白：nowrap；
}
.阿罗{
显示：内联块；
保证金：4倍；
边界半径：5px；
边框：2个实心rgb（55190235）；
背景色：rgb（240240）；
填充：4px；
宽度：40px；
文本对齐：居中；
颜色：rgb（30180230）；
字体大小：粗体；
光标：指针；
}
.演示悬停{
背景色：rgb（0,35100）；
颜色：rgb（252）；
}
.内容{
填充：8px；
宽度：640px；
边框：2个实心rgb（200200）；
边界半径：10px；
}
.演示信息{
字体：16px arial，helvetica，无衬线；
}
.标题{
字体大小：24px；
字体大小：粗体；
颜色：rgb（0,35100）；
}
.章节标题{
颜色：rgb（25100190）；
字号：18px；
字体大小：粗体；
左边距：4倍；
}
.演示信息{
左边距：4倍；
}
.演示标题{
字体：18px arial，helvetica，无衬线；
字体大小：粗体；
颜色：rgb（0,35100）；
}  
.演示内容{
左边距：8px；
边缘顶部：8px；
}      
$（文档）.ready（函数（）{
变量$left=$（“.left arrow”）；
变量$right=$（“.right arrow”）；
var$et=$（“.demo条目标题”）；
var$demoWrap=$（“.demo内部包装”）；
$left.mouseenter（函数（）{
$（this.addClass（“演示悬停”）；
变量宽度=$et.width（）；
var保证金=$et.css（“保证金左边”）；
var margin=parseInt（marginStr.substring（0，marginStr.length-2））；
控制台日志（边距、边距）；
var scrollTo=$demoWrap.width（）-width；
如果（滚动到<0）{
$et.animate（{“左边距”：scrollTo}，（边距-scrollTo）*10）；
控制台日志（宽度、边距、滚动至（边距-滚动至）*10）；
}
}).mouseleave（函数（）{
$et.stop（）；
$（this.removeClass（“演示悬停”）；
});
$right.mouseenter（函数（）{
$（this.addClass（“演示悬停”）；
变量宽度=$et.width（）；
var保证金=$et.css（“保证金左边”）；
var margin=parseInt（marginStr.substring（0，marginStr.length-2））；
控制台日志（边距、边距）；
var scrollTo=$demoWrap.width（）-width；
如果（滚动到<0）{
$et.animate（{“左边距”：0}，-margin*10）；
console.log（宽度、边距、滚动至，-边距*10）；
}
}).mouseleave（函数（）{
$et.stop（）；
$（this.removeClass（“演示悬停”）；
});
});
文本幻灯片演示


概述

下面的演示旨在演示如何使用jQuery和CSS创建幻灯片
对指定宽度而言过长的效果文本，而不是环绕文本
多行。所涉及的脚本非常轻量级，并且可以轻松地
被包装成jQuery插件。

$('.left').click(function(){

  $('#container').scrollLeft(0);
}); 
var bb=0;
$('.right').click(function(){
bb++;
    $('#container').scrollLeft(bb*50);

});



演示：
这是一个条目标题，对于该部分来说太长，
这是我给它更多的长度。
左右

很抱歉格式化问题。我刚把它修好：）
请找到下面的链接。我希望这将有助于解决这个问题

$('.left').click(function(){

  $('#container').scrollLeft(0);
}); 
var bb=0;
$('.right').click(function(){
bb++;
    $('#container').scrollLeft(bb*50);

});

解决方案：
你的标记看起来像什么，或者你有一个可以共享的标签吗？
#test
元素是什么类型的元素，它是一个
元素吗？是的，它是一个a元素。基本结构是一个大宽度的div，里面有一个按钮样式{#视差宽度17000px}我有一个演示，我将发布给你，我为一个工作项目创建的。如果这个问题解决了，你应该接受最清晰的答案。你的权利，阿迪内奥，身体是溢出的元素，谢谢你，效果很好！再来一杯
$('.left').click(function(){

  $('#container').scrollLeft(0);
}); 
var bb=0;
$('.right').click(function(){
bb++;
    $('#container').scrollLeft(bb*50);

});