Question

我试图用jquery淡入淡出图像，但是它不起作用，我错过了一些东西。

请参阅以下脚本：

var count = 1;
setInterval(function() {            
    count = (jQuery(".slideshow :nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
    //alert (count);
    jQuery(".slideshow :nth-child("+count+")").fadeIn();
}, 2000);

这是HTML代码。

<div class="slideshow">
    <div class="hover">
        <a href="#">
            <img src="#" />
            <div class="mainportfo_title">title</div>
        </a> 
    </div>
    <div class="hover">
        <a href="#">
            <img src="#" />
            <div class="mainportfo_title">title</div>
        </a> 
    </div>
</div>

Answer 1

你可以使用JQuery get（）并使用这个code，这绝对是不可能的：

var i = 0;

setInterval(function() {
    var target = $("img").get(i);
    var next = $("img").get(++i);
    $(target).fadeIn( "slow", function() {
        $(target).fadeOut( "slow", function() {
            $(next).fadeIn();
        }); 
    });
    if(i >= $("img").size()) {
        i = 0;
    }
}, 3000);

Answer 2

你想这样做吗？：jsfiddle demo

var count = 1;
setInterval(function() {
    count = (jQuery(".slideshow:nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
    jQuery(".slideshow:nth-child("+count+")").fadeIn();
}, 2000);

Answer 3

您必须定位.hover元素，否则.nth-child将选择错误的元素。

var count = 1;
setInterval(function () {
    count = ($(".slideshow .hover:nth-child(" + count + ")").fadeOut().next().length == 0) ? 1 : count + 1;
    console.log(count);
    $(".slideshow .hover:nth-child(" + count + ")").fadeIn();
}, 2000);

fiddle

jquery淡入图像

3 个答案: