0

我有：

<a id="item<?php echo $i; ?>">...</a>
<a id="item<?php echo $i; ?>">...</a>
...

其中 $i 将是从 1 开始的当前迭代的值，并将呈现如下内容：

<a id="item1">...</a>
<a id="item2">...</a>
...

我需要的是一个脚本，只保持第一个元素可见，然后在几秒钟后（比如说 4-5）淡出并淡入下一个元素。并重复此循环直到最后一个元素。然后循环重新开始。

不需要“暂停”或下一个/上一个元素。

先感谢您！

4

2 回答 2

2

你可以使用这个 JS：（http://jsfiddle.net/KWmgf/）

var fadeLoop = function($el) {
    $el.fadeOut(4000, function() {
        var $next = $el.next();
        if ($next.length == 0) {
            $next = $el.siblings(":first");
        }
        $next.fadeIn(4000, function() {
            fadeLoop($next);
        });
    });
};

$(document).ready(function(){
    $("#item1").siblings().hide();
    fadeLoop($("#item1"));
});
于 2013-08-29T15:57:33.593 回答
0

设置所有a（或更好地添加一些CLASS attribute）元素样式以display:none接受第一个元素样式。

并添加脚本：

setInterval(function() {
var $visible = $('.CLASS:visible');
$visible.hide();

if ( $visible.is(':last') ){
   $visible.siblings(':first').show()
} else {
   $visible.next().show();
}
}, 3000);

替换CLASS为真实的a类名

于 2013-08-29T15:29:29.243 回答