鼠标悬停问题使用平滑div滚动条

时间:2017-06-24 11:00:20

标签: jquery smooth-scrolling

我正在尝试使用平滑的div滚动器,如我在此处创建的Joomla模块中的演示http://www.smoothdivscroll.com/clickableLogoParade.html中所示。

除了鼠标悬停时滚动不会暂停,并且在错误控制台中我得到

,一切都运行良好

(index):1334 Uncaught TypeError:$(...)。smoothDivScroll不是函数

代码如下......

<link rel="Stylesheet" type="text/css" href="<?php echo JURI::base().'modules/' . $modulename; ?>/css/smoothDivScroll.css" />

<style type="text/css">
    #logoParade
    {
        width: 100%;
        height: 140px;
        position: fixed;
        bottom: 0px;
        background-color: #fff;
        padding:20px 0 20px 0;
    }

    #logoParade div.scrollableArea a
    {
        display: block;
        float: left;
        padding-left: 10px;
    }
    #scroller ul >li >a:before {
       content:"" !important;
    }
    #scroller img {
        display: block; 
        width: 160px !important; 
        height: 100px; 
        margin-top: -40px;
    }
</style>



<div id="logoParade">
        <?php
        foreach ($banners as $banner) {
            $imageurl = $no_image;
            if ($banner->imageurl != '') {
                $imageurl = $banner->imageurl;
            }
            ?>
            <a href="<?php echo $banner->clickurl; ?>" target="_blank"><img src="<?php echo $imageurl; ?>"  /></a>
            <?php
        }
        ?>
</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

<!-- jQuery UI Widget and Effects Core (custom download)
     You can make your own at: http://jqueryui.com/download -->
<script src="<?php echo JURI::base().'modules/' . $modulename; ?>/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>

<!-- Latest version of jQuery Mouse Wheel by Brandon Aaron
     You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="<?php echo JURI::base().'modules/' . $modulename; ?>/js/jquery.mousewheel.min.js" type="text/javascript"></script>

<!-- jQuery Kinetic - for touch -->
<script src="<?php echo JURI::base().'modules/' . $modulename; ?>/js/jquery.kinetic.min.js" type="text/javascript"></script>

<!-- Smooth Div Scroll 1.3 minified -->
<script src="<?php echo JURI::base().'modules/' . $modulename; ?>/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>

<!-- If you want to look at the uncompressed version you find it at
     js/source/jquery.smoothDivScroll-1.3.js -->

<!-- Plugin initialization -->
<script type="text/javascript">
    $(document).ready(function() {
        $("#logoParade").smoothDivScroll({ 
            autoScrollingMode: "always", 
            autoScrollingDirection: "endlessLoopRight", 
            autoScrollingStep: 1, 
            autoScrollingInterval: 25 
        });

        // Logo parade event handlers
        $("#logoParade").bind("mouseover", function() {
            $(this).smoothDivScroll("stopAutoScrolling");
        }).bind("mouseout", function() {
            $(this).smoothDivScroll("startAutoScrolling");
        });

    });

</script>

我是jQuery的新手,并且一直在努力解决这个问题。如果有人对我可以尝试的内容有任何建议,或者我做错了什么,我会非常感激。

由于

0 个答案:

没有答案