Javascript 水平分频卷轴_Javascript_Jquery_Css_Html

Javascript 水平分频卷轴

javascript jquery css html

Javascript 水平分频卷轴,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我对Jquery很陌生，我正在尝试使用scrollLeft属性在一个div上实现水平滚动，我没有收到任何错误消息，似乎什么都没有工作，有人能解释一下原因吗？提前谢谢这是我的代码： $（文档）.ready（函数（）{ var pos=$（“#容器”）.scrollLeft（）； $（“.prev”）。单击（函数（）{ $（“#容器”）。设置动画({ 左：位置-200； }); }); }); #容器{ 最大宽度：938px；高度：500px；边框：2件纯黑；左边距：自动；右边距

我对Jquery很陌生，我正在尝试使用scrollLeft属性在一个div上实现水平滚动，我没有收到任何错误消息，似乎什么都没有工作，有人能解释一下原因吗？提前谢谢这是我的代码：


$（文档）.ready（函数（）{
var pos=$（“#容器”）.scrollLeft（）；
$（“.prev”）。单击（函数（）{
$（“#容器”）。设置动画({
左：位置-200；
});
}); 
});


#容器{
最大宽度：938px；
高度：500px；
边框：2件纯黑；
左边距：自动；
右边距：自动；
溢出：滚动；
/*显示：表格*/
}
皮斯迪夫先生{
显示：表格单元格；
最小宽度：286px；
右边填充：80px；
高度：508px；
边框：2件纯红；
}
.prev，.next{
光标：指针；
位置：绝对位置；
顶部：250px；
宽度：自动；
利润上限：-22px；
填充：16px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
边框：2件纯红；
}
.下一个{
右：170px；
边界半径：3px 0 3px；
}
上一篇{
左：170px；
}
.prev:悬停，.next:悬停{
背景色：rgba（0,0,0,0.8）；
}


❮
❯

取出这行的分号，它应该可以工作

scrollLeft: pos - 200;

首先，您必须关闭包含jquery文件的脚本标记，并为您的jquery代码打开另一个脚本标记

我刚刚为jquery代码添加了一个单独的脚本标记，并使用第一个脚本标记仅引用库，它现在可以工作了。感谢您的帮助

您在代码中犯了两个错误：

向左滚动：位置-200应该类似于scrollLeft:（pos-200），因为您将对象作为参数传递

编写两个

标记，一个用于jQuery，如下所示

另一个用于自定义java脚本

<script type="text/javascript">    
    $(document).ready (function(){
        var pos  = $("#container").scrollLeft();
        $(".prev").click(function(){
            $("#container").animate({
                scrollLeft: (pos - 200)
            });
        }); 
    });


$（文档）.ready（函数（）{
var pos=$（“#容器”）.scrollLeft（）；
$（“.prev”）。单击（函数（）{
$（“#容器”）。设置动画({
左：（位置-200）
});
}); 
});

因为若使用ths元素作为外部引用，则不能在元素内编写代码

这是您的完整运行代码

<html>
<head>
<style>    
    #container{
    max-width: 938px;
    height: 500px;
    border: 2px solid black;
    margin-left: auto;
    margin-right: auto;
    overflow: scroll;
    /*display: table;*/
    }
    .picsdiv{
    display: table-cell;
    min-width: 286px;
    padding-right: 80px;
    height: 508px;
    border: 2px solid pink;
    }
    .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 250px;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    border: 2px solid pink;
    }
    .next {
    right: 170px;
    border-radius: 3px 0 0 3px;
    }
    .prev{
    left: 170px;
    }
    .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
    }
</style>
</head>
<body>
    <div id="container">
        <div class="picsdiv">
        </div>
        <div class="picsdiv">
        </div>
        <div class="picsdiv">
        </div>
        <div class="picsdiv">
        </div>
        <a class="prev">&lt;</a>
        <a class="next">&gt;</a>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">    
    $(document).ready (function(){
            var pos  = $("#container").scrollLeft();
            $(".prev").click(function(){
                $("#container").animate({
                    scrollLeft: (pos - 200)
                });
            }); 
        });
</script>
</html>


#容器{
最大宽度：938px；
高度：500px；
边框：2件纯黑；
左边距：自动；
右边距：自动；
溢出：滚动；
/*显示：表格*/
}
皮斯迪夫先生{
显示：表格单元格；
最小宽度：286px；
右边填充：80px；
高度：508px；
边框：2件纯红；
}
.prev，.next{
光标：指针；
位置：绝对位置；
顶部：250px；
宽度：自动；
利润上限：-22px；
填充：16px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
边框：2件纯红；
}
.下一个{
右：170px；
边界半径：3px 0 3px；
}
上一篇{
左：170px；
}
.prev:悬停，.next:悬停{
背景色：rgba（0,0,0,0.8）；
}
$（文档）.ready（函数（）{
var pos=$（“#容器”）.scrollLeft（）；
$（“.prev”）。单击（函数（）{
$（“#容器”）。设置动画({
左：（位置-200）
});
}); 
});

您有一个语法错误

scrollLeft:pos-200不应该以分号结束&Pato Salazar，我已经摆脱了它，它仍然不起作用告诉我你到底在做什么来测试这个代码。。。您是否先滚动，然后单击“上一步”使其返回。。。还是立即单击“上一步”按钮？首先滚动，然后单击使其返回。因此，在显示的代码中。。为什么要添加两个不同版本的jQuery？它仍然不起作用，实际上以前已经尝试过了，这很奇怪，因为我的调试器甚至没有给我任何错误消息。是的，我没有注意到脚本标记，因为我把它放进了JSFIDDLE，但它仍然不起作用？你修好脚本标签了吗？我修好了一些打字错误。