2

我试图以 3 秒的时间间隔显示一些链接图像，但在第一张图像消失后没有任何显示，任何帮助将不胜感激。

<div class="fadein">
  <a href=""><img src="/media/home-content.jpg" alt="" /></a>
  <a href=""><img src="/media/Banners/images/denim.jpg" alt="" /></a>
</div>

jQuery

jQuery.noConflict();

jQuery(document).ready(function(){

jQuery(function(){
    jQuery('.fadein a img:gt(0)').hide();
        setInterval(function(){
          jQuery('.fadein a:first-child img').fadeOut(3000)
             .parent().next('a img').fadeIn()
             .end().appendTo('.fadein');}, 
          3000);
    });

});

更新

只需将代码更改为

jQuery(function(){
    jQuery('.fadein a:gt(0) img').hide();
        setInterval(function(){
          jQuery('.fadein a:first-child img').fadeOut(3000)
             .parent().next('a').children('img').fadeIn()
             .end().appendTo('.fadein');}, 
          10000);
    });
4

4 回答 4

1

嘿男人试试这个：http: //jsfiddle.net/gRHPA/2/

希望这可以帮助！

代码

jQuery.noConflict();
jQuery('.fadein a:gt(0)').hide();

setInterval(function(){
    jQuery('.fadein a:first-child')
        .fadeOut()
        .next('a')
        .fadeIn()
        .end()
        .appendTo('.fadein');
}, 3000);
​
于 2012-07-05T12:15:26.943 回答
1 
jQuery(function() {
    var intervalId;
    var $previousAnchor;
    var $anchor;
    var $firstAnchor = $(".fadein a").first();

    $anchor = $firstAnchor;
    intervalId = setInterval(function() {
        $anchor.fadeIn();

        if (typeof($previousAnchor) != "undefined") {
            $previousAnchor.hide();
        }

        $previousAnchor = $anchor;

        if (typeof($anchor) == "undefined" || $anchor.next()[0] == undefined) {
            $anchor = $firstAnchor;
        }
        else {
            $anchor = $anchor.next();
        };
    }, 1000);
});

请注意使用缓存来提高性能。我还添加了一个性能测试来比较我可以开始工作的提供的解决方案。

见DEMO
见性能测试

于 2012-07-05T12:40:09.023 回答
0

用这个更容易，更快

CSS：

.fadein a{
    display:none;
}​

js：

var current = null;
$(function(){
    $('.fadein').each(function(){
        var context = this;
        current = $('a',this).first().show();
        setInterval(function(){
            $(current).hide();
            var next = $(current).next('a');
            if(next.length == 0)
                next = $('a',context).first();
            current = $(next).show();          
        }, 1000);
    });
});​

工作小提琴：http: //jsfiddle.net/techunter/C4uER/

于 2012-07-05T12:33:30.700 回答
0

也许您可以为此使用JQuery 轮播插件。

于 2012-07-05T12:10:05.157 回答