我正在尝试使用平滑的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的新手,并且一直在努力解决这个问题。如果有人对我可以尝试的内容有任何建议,或者我做错了什么,我会非常感激。
由于