Javascript div滑块不工作_Javascript_Jquery_Html_Css_Slider

Javascript div滑块不工作

javascript jquery html css

Javascript div滑块不工作,javascript,jquery,html,css,slider,Javascript,Jquery,Html,Css,Slider,我在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

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


上下
.桌上容器{
宽度：456px；/*可见列的总宽度+边框宽度*/
高度：300px；
边框：实心1px#000；
背景色：#eee；
溢出：隐藏；
}
.推拉窗{
宽度：760px；/*滑动窗口中所有列的总宽度+边框宽度*/
高度：300px；
溢出：隐藏；
}
.推拉窗分区{
浮动：左；
宽度：150px；
高度：300px；
背景色：#aaa；
边框：实心1px#999；
}

$（文档）.ready（函数（）{
$（“#下一列”）。单击（函数（事件）{
event.preventDefault（）；
$（'.table container'）.animate（{scrollLeft:'+=152'}，'slow'）；
});
$（“#上一列”）。单击（函数（事件）{
event.preventDefault（）；
$（'.table container'）.animate（{scrollLeft:'-=152'}，'slow'）；
});
});
这是滑动表中第一列的内容
这是滑动表中第二列的内容
这是滑动表中第三列的内容
这是滑动表中第四列的内容
这是滑动表中第五列的内容

有几件事可以让它工作起来

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

确保在包含jQuery之后包含了datatale脚本，因为它完全依赖于jQuery

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

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

我刚刚复制了您的代码，它在无效字符行45中工作。.我看不到第45行中有什么是无效的。