Question

我试图以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);
    });

Answer 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);

Answer 2

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
见Performance Test

Answer 3

也许您可以使用JQuery carousel Plugin进行此操作。

Answer 4

使用此

更轻松，更快捷

的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/

如何使用jquery在一个间隔中显示/隐藏一些链接图像

4 个答案: