当我制作某种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>
答案 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);
})();