如何解决jQuery:小型幻灯片,如何为下一张幻灯片创建一个var淡入顶部,以及setInterval问题
| http://jsfiddle.net/nicktheandroid/B7Rhe/5/ 我正在尝试使下一张幻灯片在当前幻灯片上淡入淡出,而不是在将下一张幻灯片渐入淡出之前先淡出所有幻灯片。我无法弄清楚。 另外,请注意我已注释掉的内容。我试图使它成为一个函数,然后在函数上调用setInterval,但是它不起作用,因此我只是围绕函数本身设置了setInterval,而不是在setinterval内部调用该函数。 任何帮助或建议,我们将不胜感激。var x = 2;
console.log(\'Not broken\');
setInterval(function() {
// function slideshow() {
var m = $(\'.slideshow li\').size();
x += 1;
if (x > m) {
x = 1;
}
$(\".slideshow ul li:nth-child(\" + (x) + \")\").animate({
opacity: 1
});
$(\".slideshow ul li:nth-child(n)\").animate({
opacity: 0
});
$(\".slideshow ul li:nth-child(\" + (x) + \")\").animate({
opacity: 1
});
// }
},2000);
//setInterval(\"slideshow()\",1000);
解决方法
您的问题是这样的:
$(\".slideshow ul li:nth-child(n)\")
:nth-child(n)
匹配所有内容,传递n等于根本不包含该选择器。因此问题在于,您要淡出所有元素,然后将其淡入。您只需要淡出可见的元素即可。更改为此:
$(\".slideshow ul li:visible\")
另一项小更改。初始加载时,您会显示所有图像,因此它们都将隐藏。您应该隐藏所有不可见的东西,以便使其在第一个周期工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。