多个jQuery冲突不确定原因

时间：2012-02-03 作者：Joshua

我正在尝试在我的testing site. 顶部横幅中的一个可用，最右侧边栏中的一个可用它们现在都不可用。然而，我相信下面的答案或多或少是正确的，这是Wordpress的一个“怪癖”，这是一个错误，我只需要一个解决方法。

如果我在Chrome的开发工具中看到它，css正在正确转换。在浏览器中，第一个图像无法加载，第二个图像加载，然后什么也不加载。

我已经将代码从页面顶部复制并粘贴到侧栏中的小部件位置。

我尝试复制和粘贴jQuery和CSS，在所有声明的末尾添加一个2，以尝试创建一个独特的函数，但没有效果。

我能拥有两个相同的jQuery函数吗？

CSS

<style type="text/css">
/* rotator in-page placement */
div.rotator {
    position:relative;
/*    height:77px;*/
/*    margin-left: 15px;*/
}

div.rotator ul {
    margin: 0;
    padding: 0;
}
/* rotator css */
    div.rotator ul li {
    list-style-type: none !important;
    float:left;
    position:absolute;
    list-style: none;
}
/* rotator image style */   
div.rotator ul li img {
    width: 468px;
}
div.rotator ul li.show {
    z-index:500;
}
</style>
PHP 两者的代码相同

<div class="rotator">
<ul>
    <li class="show"><a href="1"><img src="http://173.247.253.180/~andrewba/images/banners/40779.gif" /></a></li>
     <li><a href="2"><img src="http://173.247.253.180/~andrewba/images/banners/40780.gif"  /></a></li>
</ul>
</div>
jQuery 只调用一次

<script type="text/javascript">
function theRotator() {
    //Set the opacity of all images to 0
    jQuery( \'div.rotator ul li\').css({opacity: 0.0});

    //Get the first image and display it (gets set to full opacity)
    jQuery( \'div.rotator ul li:first\').css({opacity: 1.0});

    //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

    setInterval(\'rotate()\',6000);

}

function rotate() { 
        //Get the first image
    var current = (jQuery( \'div.rotator ul li.show\')?  jQuery( \'div.rotator ul li.show\') : jQuery( \'div.rotator ul li:first\'));

    if ( current.length == 0 ) current = jQuery( \'div.rotator ul li:first\');

    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass(\'show\')) ? jQuery( \'div.rotator ul li:first\') :current.next()) : jQuery( \'div.rotator ul li:first\'));

    //Un-comment the 3 lines below to get the images in random order

    //var sibs = current.siblings();
        //var rndNum = Math.floor(Math.random() * sibs.length );
        //var next = jQuery(  sibs[ rndNum ] );


    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({opacity: 0.0})
    .addClass(\'show\')
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass(\'show\');

};

//Ammended based on the Answer.    
jQuery( document).ready(function() {        
        //Load the slideshow
    jQuery(\'.rotator\').each(function() { jQuery(this).theRotator() });
    jQuery( \'div.rotator\').fadeIn(1000);
    jQuery( \'div.rotator ul li\').fadeIn(1000); // tweek for IE
});
</script>

2 个回复
最合适的回答,由SO网友:Joshua 整理而成

基于的https://stackoverflow.com/questions/7818525/jquery-image-rotator-with-multiple-instances-on-single-page 下面是最终使其工作的代码

PHP

顶部横幅

<div id="top" class="rotator">
    <ul>
        <li class="show"><a href="1"><img src="http://173.247.253.180/~andrewba/images/banners/40779.gif" /></a></li>
         <li><a href="2"><img src="http://173.247.253.180/~andrewba/images/banners/40780.gif"  /></a></li>
    </ul>
</div>
侧栏

<div id="right" class="rotator">
    <ul>
        <li class="show"><a href="1"><img src="http://173.247.253.180/~andrewba/images/banners/40787.gif" /></a></li>
         <li><a href="2"><img src="http://173.247.253.180/~andrewba/images/banners/40788.gif"  /></a></li>
    </ul>
</div>

jQuery

<script type="text/javascript">
    jQuery( document).ready(function() {        
            //Load the slideshow
        theRotator(\'top\');
        theRotator(\'right\');
        jQuery( \'div.rotator\').fadeIn(1000);
        jQuery( \'div.rotator ul li\').fadeIn(1000); // tweek for IE
    });

    function theRotator( id ) {
        //Set the opacity of all images to 0
        var jqElem = jQuery( \'#\' + id );
        jqElem.find(\'ul li\').css({opacity: 0.0});

        //Get the first image and display it (gets set to full opacity)
        jqElem.find(\'ul li:first\').css({opacity: 1.0});

        //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
        setInterval(rotate,6000);

        function rotate() { 
            //Get the first image
            var current = (jqElem.find(\'ul li.show\')?  jqElem.find(\'ul li.show\')  : jqElem.find(\'ul li:first\'));

            //Get next image, when it reaches the end, rotate it back to the first image
            var next = ((current.next().length) ? ((current.next().hasClass(\'show\')) ? jqElem.find(\'ul li:first\') :current.next()) : jqElem.find(\'ul li:first\'));   

            //Set the fade in effect for the next image, the show class has higher z-index
            next.css({opacity: 0.0})
            .addClass(\'show\')
            .animate({opacity: 1.0}, 1000);

            //Hide the current image
            current.animate({opacity: 0.0}, 1000)
            .removeClass(\'show\');

        };

    }

    function rotate() { 
            //Get the first image
        var current = (jQuery( \'div.rotator ul li.show\')?  jQuery( \'div.rotator ul li.show\') : jQuery( \'div.rotator ul li:first\'));

        if ( current.length == 0 ) current = jQuery( \'div.rotator ul li:first\');

        //Get next image, when it reaches the end, rotate it back to the first image
        var next = ((current.next().length) ? ((current.next().hasClass(\'show\')) ? jQuery( \'div.rotator ul li:first\') :current.next()) : jQuery( \'div.rotator ul li:first\'));

        //Un-comment the 3 lines below to get the images in random order

        //var sibs = current.siblings();
            //var rndNum = Math.floor(Math.random() * sibs.length );
            //var next = jQuery(  sibs[ rndNum ] );


        //Set the fade in effect for the next image, the show class has higher z-index
        next.css({opacity: 0.0})
        .addClass(\'show\')
        .animate({opacity: 1.0}, 1000);

        //Hide the current image
        current.animate({opacity: 0.0}, 1000)
        .removeClass(\'show\');

    };

</script>

CSS

无更改。

SO网友:Scott

我已经投票决定结束这个话题，但我知道答案，所以我会尽力解释。

如果在同一页上有多个区域需要图像旋转，那么您的代码将无法工作。需要将旋转函数的实例绑定到要旋转的每个区域。这样每个人都可以独立工作。

下面是我编程的内容，允许在同一屏幕上使用多个旋转器。它相当基本，但可以根据您的需要随意修改。

JQUERY

$(document).ready(function() {

    // Any image containers need rotating?
    $(\'.imgRotator\').each(function() { $(this).scWFWImageRotator() });

});

// jQuery plugin to make image containers rotate.
(function($){

    // Swap text with title attribute
    $.fn.scWFWImageRotator = function() {

        var rotatorTimeSwap = 6000;

        this.find("img").removeClass("selected");
        this.find("img:first-child").addClass("selected");

        var rotatorImageChangeFunc = function() {
            var rotatorImages = this.find("img");
            var imgSelected = this.find("img.selected");
            var rotatorImgCount = rotatorImages.length;
            var rotatorCurImage = rotatorImages.index(imgSelected);
            var rotatorNextImage = rotatorCurImage + 1;
            if(rotatorNextImage >= rotatorImgCount) {
                rotatorNextImage = 0;
            }
            this.find("img:eq("+rotatorCurImage+")").fadeOut("500", function() {
                $(this).removeClass("selected");
            });
            this.find("img:eq("+rotatorNextImage+")").fadeIn("500", function() {
                $(this).addClass("selected");
            });
        }

        return this.each(function() {

            var rotatorTimer;
            var $this  = $(this);
            var func = $.proxy( rotatorImageChangeFunc, $this );
            var rotatorImages = $this.find("img").length;

            if(rotatorImages > 1) {
                rotatorTimer = setInterval(func, rotatorTimeSwap);
                $this.hover(
                    function() { rotatorTimer = clearInterval(rotatorTimer); },
                    function() { rotatorTimer = setInterval(func, rotatorTimeSwap); }
                );
            }

        });

    };

})(jQuery);

HTML

<div class="imgRotator">
    <img src="/images/rotator/home1.jpg" />
    <img src="/images/rotator/home2.jpg" />
    <img src="/images/rotator/home3.jpg" />
    <img src="/images/rotator/home4.jpg" />
</div>

CSS

/**** Image Rotator ****/
.imgRotator {
    background-color: #d6e8ec;
    height: 180px;
    margin-bottom: 5px;
    overflow: hidden;
    position: relative;
    width: 180px;
}
.imgRotator img {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
}
.imgRotator img:first-child,
.imgRotator img.selected { display: block; }

结束
标签： jquery   小码农  

相关推荐

如何在WP插件中实现jQuery UI对话框模式？

我有一个WordPress插件，可以创建自定义的顶级菜单和子菜单。子菜单调用这个（参见下面的代码）BranchMaintenance PHP表单，它在一个表中显示分支，例如数据库，（使用$wpdb).问题在于如何弹出jQuery UI对话框模式表单。毫无疑问，我的代码是负责的。。。代码中的未知变量outer/toplevel函数，如。$(function() {我正在尝试操作我需要的脚本a）最初隐藏对话框表单（它显示在我的分支数据表上方）。。可能是弄错了b）调用时显示它（仍然按照原始演示代码）<di