我正在尝试拼凑一个视频库。我正在使用 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>
