Javascript 如何安装jQuery插件？

我正在尝试在我的网站上安装此插件，但无法使其正常工作。我的目标是得到一个水平的链接列表，当鼠标悬停在上面时，这些链接会向左或向右滚动（取决于光标的位置）

我在HTML中添加了以下文件：

<script src="js/jquery.smoothdivscroll-1.3-min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery.kinetic.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script src="js/jquery.min.js"

当我预览代码时，我得到的是：

---

有人能看出我做错了什么吗？我非常感谢您的帮助。

您必须在加载

jquery.min.js

之后加载插件，您不应该加载两个版本的

jquery ui

。Javascript控制台中是否出现错误，警告未定义

$

或

jquery

？请按照插件加载的顺序进行，就像他们在演示中所做的那样

<script type="text/javascript">
$(document).ready(function () {
    $("#makeMeScrollable").smoothDivScroll({
        mousewheelScrolling: "allDirections",
        manualContinuousScrolling: true,
        autoScrollingMode: "onStart"
    });
});
</script>

<div class="topics_panel">
    <div class="table" id="makeMeScrollable">
        <a href="/index.php?q=News&search=search" class="topic" id="news">News</a>
        <a href="/index.php?q=Cars&search=search" class="topic" id="cars">Cars</a>
        <a href="/index.php?q=Food&search=search" class="topic" id="food">Food</a>
        <a href="/index.php?q=Sports&search=search" class="topic" id="sports">Sports</a>
        <a href="/index.php?q=Travel&search=search" class="topic" id="travel">Travel</a>
        <a href="/index.php?q=Technology&search=search" class="topic" id="tech">Technology</a>
        <a href="/index.php?q=Arts&search=search" class="topic" id="arts">Arts</a>
        <a href="/index.php?q=Architecture&search=search" class="topic" id="architecture">Architecture</a>
        <a href="/index.php?q=Entertainment&search=search" class="topic" id="entertainment">Entertainment</a>
        <a href="/index.php?q=Music&search=search" class="topic" id="music">Music</a>
        <a href="/index.php?q=Money&search=search" class="topic" id="money">Money</a>
    </div>
</div>

#makeMeScrollable div.scrollableArea *
{
    position: relative;
    display: block
    float: left;
    margin: 0;
    padding: 0;
    /* If you don't want the images in the scroller to be selectable, try the following
        block of code. It's just a nice feature that prevent the images from
        accidentally becoming selected/inverted when the user interacts with the scroller. */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}