Question

我正在努力破解视频库。我正在使用jQuery制作一个滑出面板这很简单。我也使用jQuery滚动缩略图。他们都工作得很漂亮。问题是我需要滚动的thubmnails在滑出面板内工作，但它不会。我认为它与文件就绪的两个功能有关，另一个是窗口onload。我不确定因为我是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>

Answer 1

只要你的dom /文件准备好就会执行document.ready，但只有在所有对象（图像/文本）加载到momery中后才会执行window.load。

我遇到了similer类问题，我使用document.ready为我的多个图像列表制作滚动条，但由于一些图像尺寸很大，所以在加载这些图像之前，文档已经被解雇并面对问题..

所以稍后我用window.load更改它，所以现在使用window.load我的滚动条创建过程只有在所有图像正确加载到内存后才会被触发..

希望这能帮助您获得解决方案..

Answer 2

thumbnailScroller插件似乎需要计算拇指包装的尺寸。在您的情况下，最初不会显示包装器，并且可能会使插件混乱。

您可以尝试在执行插件后隐藏.panel元素。

jQuery.noConflict(); 
/* calling thumbnailScroller function with options as parameters */
(function($){
    $(document).ready(function(){
        $(".trigger").click(function(){
            $(".panel").toggle("fast");
            $(this).toggleClass("active");
            return false;
        });
    });
    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 
        });

        // Hide the .panel only now :
        $(".panel").hide();
    };
})(jQuery);

（您需要修改CSS以便最初显示.panel）

Answer 3

为什么在同一页面中使用2 document.ready功能。它肯定会发生冲突。只是在开始时避免脚本声明并尝试。

在script标签中只需要这么多js代码。这对你有用。

jQuery.noConflict(); /* calling thumbnailScroller function with options as parameters*/
(function($){
    $(".trigger").click(function(){
       $(".panel").toggle("fast");
       $(this).toggleClass("active");
      return false;
    });


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);

Answer 4

首先删除$(".trigger").click(...)的双击事件绑定，只需要第二个。然后尝试在window.onload中的thumbnailScroller初始化之后移动此绑定，因为在DOM就绪事件之后window.onload会激活很多。并删除{/ 1}}包围window.onload作为不必要的。试试这个：

(function($){

jQuery文档准备与window onload冲突？

4 个答案: