Question

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
        $(document).ready (function(){
            var pos  = $("#container").scrollLeft();
            $(".prev").click(function(){
                $("#container").animate({
                    scrollLeft: pos - 200;
                });
            }); 
        });
    
        
        
  </script>

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

  
<body>
   <div id="container">
       <div class="picsdiv">
       
       </div>
       <div class="picsdiv">
       
       </div>
       <div class="picsdiv">
       
       </div>
       <div class="picsdiv">
       
       </div>
       <a class="prev">&#10094;</a>
      <a class="next">&#10095;</a>
    </div> 
    
</body>

Answer 1

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

scrollLeft: pos - 200;

Answer 2

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

Answer 3

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

Answer 4

您的代码中出现了2个错误：

scrollLeft：pos - 200; 应该像 scrollLeft：（pos - 200），因为您将对象作为参数传递
< / LI>
写两个<script>标签，一个用于jQuery，如下所示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javacsript"></script>

另一个用于自定义java脚本

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

水平Div滚动

4 个答案: