Question

我正在StackOverflow中的几个帖子的帮助下创建一个div滑块，但由于某种原因它无法正常工作。显示Jquery上有一些错误，我没看到。我需要第二组眼睛

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Previous Next</title>
 <style type="text/css">
 .table-container {
    width:456px; /* Total width of visible columns + border widths */
    height:300px;
    border:solid 1px #000;
    background-color:#eee;
    overflow:hidden;
}

.sliding-window {
    width:760px; /* Total width of all columns in sliding-window + border widths */
    height:300px;
    overflow:hidden;
}

.sliding-window div {
    float:left;
    width:150px;
    height:300px;
    background-color:#aaa;
    border:solid 1px #999;
}

 </style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $('#next-column').click(function(event) {
        event.preventDefault();
        $('.table-container').animate({scrollLeft:'+=152'}, 'slow');        
    });

    $('#previous-column').click(function(event) {
        event.preventDefault();
        $('.table-container').animate({scrollLeft:'-=152'}, 'slow');        
    });

});
</script>

</head>

<body>

<a id="previous-column" href="#">Previous</a>
<a id="next-column" href="#">Next</a>
<div class="table-container">
    <div class="sliding-window">
        <div id="col-1">
            <p>This is the content of the first column in the sliding table</p>
        </div>
        <div id="col-2">
            <p>This is the content of the second column in the sliding table</p>
        </div>
        <div id="col-3">
            <p>This is the content of the third column in the sliding table</p>
        </div>
        <div id="col-4">
            <p>This is the content of the fourth column in the sliding table</p>
        </div>
        <div id="col-5">
            <p>This is the content of the fifth column in the sliding table</p>
        </div>
    </div>
</div>

</body>

</html>

Answer 1

您可以尝试使用此功能。

确保您的脚本被拉入页面，一种检查方法是使用Chrome调试器中的“来源”标签，然后在html主题部分中搜索其他文件

确保在包含jQuery之后已经包含了datatale脚本，因为它肯定依赖于它。

检查jQuery是否正确包含且仅一次。

注意jQuery冲突。还有一些其他的库覆盖了$，所以你的代码不能工作，因为$不再是jQuery的别名。您可以使用jQuery.noConflict（）来避免与页面上使用相同变量$的其他库发生冲突。

div滑块不工作

1 个答案: