试图将 Smooth Div Scroll Jquery 连接到我的网站但它没有连接？

Question

您好，我正在尝试将 Smooth Div Scroll 连接到我的网站：http://Izzy.me

Smooth Div Scroll 是这样的：http://smoothdivscroll.com/

在 Izzy.Me 的首页我有 3 张鸟的照片，我用它们作为示例来查看是否连接了 Smooth Div Scroll。

这是这些图片的 CSS：

    <div id="makeMeScrollable">
    <img src="http://www.birds.com/wp-content/uploads/home/bird4.jpg" alt="Field" id="field" />
    <img src="http://www.birds.com/wp-content/uploads/home/bird.jpg" alt="Gnome" id="gnome" />
    <img src="http://3.bp.blogspot.com/-KFaKPd9ytxM/TxdKjRZulaI/AAAAAAAAD6A/w0kduvREq2w/s1600/bird-1-wallpaper-1024x768-853745.jpeg" alt="Pencils" id="pencils" />
    </div>

在我的子函数 php 中有这个：

    <?php

    function theme_javascript()
    {
    wp_enqueue_script( 'kinetic', get_template_directory_uri() .      '/js/jquery.kinetic.min.js', array('jquery'), '20140109', true );   
    wp_enqueue_script( 'mousewheel', get_template_directory_uri() . '/js/jquery.mousewheel.min.js', array('jquery'), '20140109', true );  
    wp_enqueue_script( 'smoothdivscroll', get_template_directory_uri() . '/js/jquery.smoothdivscroll-1.3-min.js', array('jquery'), '20140109', true ); 
    wp_enqueue_script( 'jquery-ui-1.8.23.custom', get_template_directory_uri() . '/js/jquery-ui-1.8.23.custom.min.js', array('jquery'), '20140109', true ); 
    wp_enqueue_script( 'jquery-ui-1.10.3.custom', get_template_directory_uri() . '/js/jquery-ui-1.10.3.custom.min.js', array('jquery'), '20140109', true ); 
    }

    add_action( 'wp_enqueue_scripts', 'theme_javascript' );


    ?> 

我从 Smoothscroll 下载的插件文件，包括 .min 文件和完整的 js 文件。我只是将 .min 文件拖放到我的父主题 JS 文件夹中，而忽略了文件夹中更完整的 .js 文件。

我不确定我的函数代码是否写得正确，因为 .min 文件的名称让我对如何正确包含它们感到有些困惑。所以也许这就是为什么它没有连接？ .min 文件的五个名称是：

1. jquery.kinetic.min
2. jquery.mousewheel.min
3. jquery.smoothdivscroll-1.3-min
4. jquery-ui-1.8.23.custom.min
5. jquery-ui-1.10.3.custom.min

所以现在回头看看我包含的函数 php 看起来对吗？ （感谢您的帮助）

Answer 1

调试你的javascript：

1. 在 Chrome 中打开网站
2. 按 F12
3. 刷新页面，是否发现任何错误？

Uncaught TypeError: Object function (e,t){return new x.fn.init(e,t,r)} has no method 'widget' - 如果发生此错误jQuery.UI 未连接

尝试查找不兼容的库：

1. 创建外部工作示例，然后将其插入站点 (http://jsfiddle.net/wnCPL/)。
2. 尝试更改 js 库的顺序。
3. 尝试依次排除 JS 库
4. 将不兼容的库替换为另一个相似或不同的版本

示例 html：

<div id="makeMeScrollable">
    <img src="https://lh5.googleusercontent.com/-B5j3nmGIRLY/Uh3PDcFW1GI/AAAAAAAADmg/6qMAB1d7E4Y/w439-h612-no/DSC_1841-Edit_HDR-v2-w900-RP.jpg" alt="Field" id="field" />
    <img src="https://lh3.googleusercontent.com/-5JUmqJ5zOho/Uf5xP9l5LcI/AAAAAAABB-U/dVkkiLJ3_PA/w857-h612-no/In+Living+Color+%25C2%25A9+Laurie+Rubin_LAR3452.jpg" alt="Gnome" id="gnome" />
    <img src="https://lh5.googleusercontent.com/-NNtAD1d_Ekg/UgGad3929uI/AAAAAAAAXxc/oRerem5pkPg/w918-h612-no/Afternoon-2.jpg" alt="Pencils" id="pencils" />
</div>

示例 javascript

$(document).ready(function () {
    $("#makeMeScrollable").smoothDivScroll({
        touchScrolling: true,
        manualContinuousScrolling: true,
        hotSpotScrolling: false,
        mousewheelScrolling: false
    });
});