【发布时间】：2011-12-30 15:28:14
【问题描述】：
我正在尝试创建一个视频库。我正在使用 jQuery 制作一个滑出面板 这很简单。我也在使用 jQuery 来滚动缩略图。他们都工作得很漂亮。问题是我需要滚动缩略图才能在滑出面板内工作，但它不会。我认为这与准备文档和另一个是窗口加载这两个功能有关。我不确定，因为我是 jQuery 新手。有人能帮忙吗。
这是滑出面板功能。
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
她是滚动功能。
<script>
jQuery.noConflict()
(function($){
window.onload=function(){
$("#tS2").thumbnailScroller({
scrollerType:"clickButtons",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
}
})(jQuery);
</script>
任何人都可以在这里看到任何会相互冲突的东西吗？
这是整个 html。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical Sliding Info Panel With jQuery</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link href="jquery.thumbnailScroller.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery-ui-1.8.13.custom.min.js"></script>
<script>
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
</head>
<body>
<div class="panel">
<div>
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href="#"><img src="thumbs/img1.jpg" /></a>
<a href="#"><img src="thumbs/img2.jpg" /></a>
<a href="#"><img src="thumbs/img3.jpg" /></a>
<a href="#"><img src="thumbs/img4.jpg" /></a>
<a href="#"><img src="thumbs/img5.jpg" /></a>
<a href="#"><img src="thumbs/img6.jpg" /></a>
<a href="#"><img src="thumbs/img7.jpg" /></a>
<a href="#"><img src="thumbs/img8.jpg" /></a>
<a href="#"><img src="thumbs/img9.jpg" /></a>
<a href="#"><img src="thumbs/img10.jpg" /></a>
<a href="#"><img src="thumbs/img11.jpg" /></a>
<a href="#"><img src="thumbs/img12.jpg" /></a>
<a href="#"><img src="thumbs/img13.jpg" /></a>
<a href="#"><img src="thumbs/img14.jpg" /></a>
<a href="#"><img src="thumbs/img15.jpg" /></a>
<a href="#"><img src="thumbs/img16.jpg" /></a>
<a href="#"><img src="thumbs/img17.jpg" /></a>
<a href="#"><img src="thumbs/img18.jpg" /></a>
<a href="#"><img src="thumbs/img19.jpg" /></a>
<a href="#"><img src="thumbs/img20.jpg" /></a>
</div>
</div>
<a href="#" class="jTscrollerPrevButton"></a>
<a href="#" class="jTscrollerNextButton"></a>
</div>
<!-- thumbnail scroller markup end -->
<script>
/* jQuery.noConflict() for using the plugin along with other libraries.
You can remove it if you won't use other libraries (e.g. prototype, scriptaculous etc.) or
if you include jQuery before other libraries in yourdocument's head tag.
[more info: http://docs.jquery.com/Using_jQuery_with_Other_Libraries] */
jQuery.noConflict();
/* calling thumbnailScroller function with options as parameters */
(function($){
window.onload=function(){
$("#tS2").thumbnailScroller({
scrollerType:"clickButtons",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
}
})(jQuery);
</script>
<!-- thumbnailScroller script -->
<script src="jquery.thumbnailScroller.js"></script>
</div>
</div>
<a class="trigger" href="#">infos</a>
</body>
</html>
【问题讨论】：
-
你的 jquery 包括什么？
标签： javascript jquery