jQuery图像旋转器出错

时间:2011-12-14 20:32:23

标签: jquery image rotation

当我制作某种jQuery图像旋转器时,我遇到了问题。这个问题在哪里?

http://jsfiddle.net/thisizmonster/6a6fv/3/

$(function() {
    setInterval(function(){
        var currentImg = $(".background-image img.active").attr("rel");
        var nextImg = (currentImg != $(".background-image img").length) ? currentImg++ : 1;
        //alert(nextImg );
        $(".background-image img[rel="+currentImg+"]").removeClass("active");
        $(".background-image img[rel="+nextImg+"]").addClass("active");
    }, 3000);
});

CSS:

.background-image {
    position: relative;
}
.background-image img {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.background-image img.active {
    z-index: 2;
}

HTML:

<div class="background-image">
    <img src="http://lorempixel.com/400/200/sports" rel="1" width="400" height="200" class="active">
    <img src="http://lorempixel.com/400/200/animals" rel="2" width="400" height="200">
    <img src="http://lorempixel.com/400/200/city" rel="3" width="400" height="200">
</div>

2 个答案:

答案 0 :(得分:1)

variable++++variable之间存在细微差别。 ++变量是预先递增的,这意味着在使用前variable递增,variable++是递增后的:variable首先使用然后递增。

这是一个固定的version

答案 1 :(得分:1)

<强> DEMO jsFiddle

var ch = $('.background-image').children();
ch.not(':eq(0)').hide();
var i = 0;

(function anim(){  
  ch.delay(900).fadeTo(900,0).eq(++i % ch.length).fadeTo(900,1,anim);
})();