Question

我正在尝试基于jquery的幻灯片放映，我有：

表示html：

<ul id="main_ul">
    <li><img src="images/image1.jpg"></li>
    <li><img src="images/image2.jpg"></li>
    <li><img src="images/image3.jpg"></li>
</ul>

for css：

#main_ul li {
position:relative;
left:0;
top:0;
list-style-type: none;
width:1000px;
height:524px;
padding: 0;
}

#main_ul {
position: relative;
width:1000px;
height:524px;
padding: 0;
}

对于JS来说

：

   $(document).ready(function(){

      $("#main_ul li:gt(0)").hide();

      setInterval(function(){

         $("#main_ul :first-child").fadeOut().next("li").fadeIn().end().appendTo("#main_ul");
      }, 3000);
   });

看起来下一个li元素不会淡化IN。你们有什么建议吗。

P

Answer 1

编辑：

重新阅读你的问题后，我现在看到了实际问题。下一张幻灯片正在淡入淡出，但在淡入淡出过程中它会被挤出视线。这是因为您有两个可见元素同时使用相对定位渐变，因此一个碰撞另一个直到它淡出。它在较小的尺寸上更明显，比如这个小提琴：http://jsfiddle.net/Bcup4/

我的建议是使用fadeOut的回调函数。这将确保fadeOut在fadeIn开始之前完成。它会是这样的：

$("#main_ul :first-child").fadeOut( 1000, "linear" function() {
    // Put fadeIn code here
});

~~$（“＃main_ul：first-child”）。fadeOut（）。next（“li”）。fadeIn（）。end（）。appendTo（“＃main_ul”）;~~

您的代码说“在#main_ul中查找第一个孩子中的下一个li”。你应该淡出第一个，附加它，然后用新的选择器开始第二行来获取下一个元素（现在是第一个元素）。

jquery fadeIn fadeOut幻灯片放映不加载下一个元素

1 个答案: