0

我在 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>
4

1 回答 1

0

您可以尝试做一些事情来使其正常工作。

确保您的脚本被拉入页面，一种检查方法是使用 Chrome 调试器中的“源”选项卡并在 html 头部分中搜索其他文件

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

检查是否正确包含 jQuery，并且只包含一次。

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

于 2012-12-22T13:59:40.217 回答