我有一个有序的缩略图列表。我正在试图找出如何显示说 - 其中9个,然后让它们淡出并使用jQuery显示以下9等。
会有很多图像,所以我需要保留卡车的功能......
我非常感谢任何帮助
答案 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);
哪个有效!我想知道 - 如果问的话不是太多了! - 如果你可以告诉我当用户将鼠标悬停在图像上时如何暂停效果?
再次非常感谢!