如何使用jquery显示/隐藏一段时间内的几个链接图像

问题描述：

我想在3秒的时间间隔内显示一些链接图像，但在第一个图像淡出后没有任何显示，任何帮助将不胜感激。如何使用jquery显示/隐藏一段时间内的几个链接图像

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

});

UPDATE

代码只是改变

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

一旦淡出，它会得到隐藏。你不需要再显示它。 – madhairsilence 2012-07-05 12:07:26

答

也许你可以使用JQuery carousel Plugin这一点。

答

嗨，哥们试试这个：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);

如果您设置'.fadeOut（0）'和'.fadeIn（500）'，那么它们将不会同时出现在屏幕上（用于直接替换而不是临时'堆叠'）。 – RobinGower 2012-07-05 12:35:27

嘿@RobinGower看到在这里工作：http://jsfiddle.net/gRHPA/3/但你为什么要做的社交媒体社会需要3000，演示应该帮助 – 2012-07-05 12:49:54

其他解决方法：http://jsfiddle.net/gRHPA/4/ 它仍然每3秒循环一次，它只是没有两个图像可见的同时（所以淡入/淡出不重叠）。 – RobinGower 2012-07-05 12:54:57

答

更轻松，这

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/

以防万一您有多个传送带div。基本上在这里你只需要一个带淡入淡出类和锚标签的div。 – TecHunter 2012-07-05 12:34:26

答

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

如何使用jquery显示/隐藏一段时间内的几个链接图像

相关推荐