jQuery显示了一些列表项,淡出它们然后显示更多

时间:2010-09-27 09:27:31

标签: jquery

我有一个有序的缩略图列表。我正在试图找出如何显示说 - 其中9个,然后让它们淡出并使用jQuery显示以下9等。

会有很多图像,所以我需要保留卡车的功能......

我非常感谢任何帮助

3 个答案:

答案 0 :(得分:3)

两段代码:

var show = 9;
var current = show - 1;
var length;

var gallery = $('#gallery');

var galleryItems = gallery.children('li');
length = galleryItems.length;

setInterval(function(){
    current = (current+1)%60;

    galleryItems.eq(current).slideDown();
    galleryItems.eq(current - show).slideUp();
}, 3000);

这会将整个列表一次向上移动一个项目。请参阅:http://jsfiddle.net/VL646/1/


var show = 9;
var current = 0;
var length;

var gallery = $('#gallery');

var galleryItems = gallery.children('li');
length = galleryItems.length;

setInterval(function(){
    for(var i = current; i < (current+show); i++){
        galleryItems.eq(i).fadeOut(300, function(){
            var idx = (galleryItems.index(this) + show) % length;
            galleryItems.eq(idx).fadeIn(300);
        });
    }

    current += show;
    if(current > length) current = 0;
}, 4000);

这会淡入并淡出一组物品。请参阅:http://jsfiddle.net/DtFwH/

这里要记住的主要事情是setInterval()函数,它一直反复运行函数,以及.eq(n)函数,它得到n th 当前jQuery对象的元素。

答案 1 :(得分:1)

$a = $temp = $("img");
for(var i=0; i<$a.length; i++) {
      $temp = $a.hide(); 
      $temp.slice(i * 9, 9).fadeIn();
      setTimeout('',1000);
}

可能这个会起作用

答案 2 :(得分:1)

@Yi - 非常感谢!!

这是我用过的代码

var show = 15;
var current = 0;
var gallery = $('ul#img-list');
var galleryItems = gallery.children('li');
var length = galleryItems.length;
gallery.children('li:gt(14)', this).hide();

setInterval(function(){
for(var i = current; i < (current+show); i++){
    galleryItems.eq(i).fadeOut(600, function(){
    var idx = (galleryItems.index(this) + show) % length;
    galleryItems.eq(idx).fadeIn(900);
  });
}
current += show;
     if(current > length) current = 0;
}, 5000);

哪个有效!我想知道 - 如果问的话不是太多了! - 如果你可以告诉我当用户将鼠标悬停在图像上时如何暂停效果?

再次非常感谢!