Question

我试图让这个工作，但由于某种原因，这是不对的。我希望图像淡入另一个图像并保持循环。它适用于小提琴，但不适用于我的wordpress网站。我认为这与这件作品有关。任何帮助将不胜感激。

JQ：

function cycleImages() {
    $('#portfolio_cycler').each(function() {
        var $active = $(this).find('.active');
        var $next = ($(this).find('.active').next().length > 0) ? $(this).find('.active').next() : $(this).find('img:first');
        $next.css('z-index', 2); //move the next image up the pile
        $active.fadeOut(1500, function() { //fade out the top image
            $active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
            $next.css('z-index', 3).addClass('active'); //make the next image the top one
        });
    });
}

$(document).ready(function() {
    // run every 5s
    setInterval('cycleImages()', 5000);
});

HTML：

<div id="feat_header">
    <div id="portfolio_cycler">
        <img class="active" src="http://baylor-personal-edge.com/wp-content/themes/striking/images/text_slide1.jpg" alt="You're used to a certain type of comfort" />
        <img src="http://baylor-personal-edge.com/wp-content/themes/striking/images/text_slide2.jpg" alt="You're physical should be no different" />        
    </div>
</div>

CSS：

#portfolio_cycler{position:relative;}
#portfolio_cycler img{position:absolute;z-index:1}
#portfolio_cycler img.active{z-index:3}
#feat_header {
    background:#000;
    position:absolute;
    top:20px;
    left:1px;
    height:23px;
    width:310px;
    z-index:9999;
    padding:10px;
    font-size:15px;
    color:#FFF;
    font-style:italic;
    font-weight:bold;
}

Answer 1

在任何可能使用jQuery的框架中开发或者使用可能使用jQuery的插件时要记住的事情是定义noConflict。

var $j = jQuery.noConflict();

请记住，您现在需要将jQuery或$的任何实例更改为新定义的$ j

$j(document).ready(function() {
    $j('.example').fadeIn();
});

这可以解释为什么它不能在WordPress中工作。

Answer 2

我和你的小提琴一起玩，最后得到了这个：http://jsfiddle.net/8ks9K/8/

$(document).ready(function() {
    // run every 5s
    var all = $('#portfolio_cycler img').hide();
    var idx = 0;
    $(all[idx]).show();
    setInterval(function cycleImages() {
        $(all[idx]).fadeOut('slow',function(){
            idx++;
            if( idx > all.length - 1 ) idx = 0;
                $(all[idx]).fadeIn('slow');
        });
    }, 1000);
});

我不记得这个问题，所以;）

简单的jQuery图像淡出

2 个答案: