我创建了一个JQuery CSS3图像库。问题是下面代码中的下一个函数不起作用。
function gallery() {
var islide = $('.cornerimg:visible');
$(islide).removeClass('cornerimgfocus');
$(islide).next().addClass('cornerimgfocus');
setTimeout(function() {
gallery()
},4000);
}
$(window).load(function() {
$( '.cornerimg' ).first().addClass('cornerimgfocus');
setTimeout(function() {
gallery()
},4000);
});
下一个函数对所有下一个元素进行操作,而不仅仅是下一个。其结果是,第一个元素之后的所有class .cornerimg元素立即变得可见。
HTML
<div class="imageitem">
<div class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00764s-968x400.jpg);"></div>
<div class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00762s-968x400.jpg);"></div>
<div class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00759s-968x400.jpg);"></div>
</div>
有什么想法吗
太棒了
6条答案
按热度按时间5cnsuln71#
.next()
选择 * 集合中的每个元素 * 之后的下一个元素。如果集合有 n 个元素,则
.next()
也将有 n 个元素。您可能需要
.first().next()
或.eq(1)
。cgh8pdjw2#
为什么不选择
.cornerimgfocus
。这是应该/是可见的幻灯片,据我所知,从你的代码。:visible
选择器似乎选择了所有div。ahy6op9u3#
答案在文档中:“获取匹配元素集合中每个元素的紧接着的兄弟元素。”jquery next()
初始选择器返回每个cornerimg div,所以next返回每个元素的下一个元素。
尝试这样做以获取第一个元素,然后继续前面的代码(但如Slaks所说,删除islide周围的$()):
cbeh67ev4#
关于API documentation:
Get the immediately following sibling of each element in the set of matched elements.
因此它只获取紧接着的元素(与nextAll
相反)。问题是$(islide)
包含很多相邻的元素,所以$(islide).next()
将包含所有紧跟在其中一个元素之后的元素(即$(islide).next()
)。$(islide)
的所有元素,除了第一个加上$(islide)
的最后一个元素之后的元素)。根据您的需要,您可以尝试使用$(islide).last()
或$(islide).next(':not(.cornerimg)')
。czfnxgou5#
你需要使用一个图像索引,就像我在回答你的另一个问题时所说的那样
jQuery每个函数之间暂停非函数
xlpyo6sf6#
我想这就是你想要的