如何在div中使用FadeIn和fadeOut img标签使用Jquery
sample:
<div class='myDivgallery' >
<img style="display: none;" src="images/1.jpg" />
<img style="display: none;" src="images/2.jpg" />
<img style="display: none;" src="images/3.jpg" />
<img style="display: none;" src="images/4.jpg" />
</div>
我必须制作一个幻灯片画廊,但是,我不使用插件。
感谢
答案 0 :(得分:2)
$('.myDivgallery img').fadeIn('slow'); // fade in
$('.myDivgallery img').fadeOut('slow'); // fade out
答案 1 :(得分:2)
Erfan ...如果你想要一个SLIDE画廊而不是:SLIDE GALLERY
如果你想要你想要的东西(; D)而不是尝试:
修改强> 由于一个众所周知的jQuery票证导致的错误,我想出了这个演示:
var el = $('.myDivgallery img');
var z = 1;
$(el[0]).show();
function loop(ev) {
el.siblings().delay(1000).fadeOut(300).eq(z).fadeIn(500, function() {
check = z != el.length-1 ? z++ : z=0;
loop();
});
}
loop();
(感谢社区为我之前的演示没有为我烹饪 maccaroni pasta al pesto :D)
(并且不要问我为什么我调用var {z
“实际执行c
次安装”
<小时/> 旧版本在页面/标签缺失时创建了动画累积
$('.myDivgallery img:eq(0)').show(); // show first image on page load
var imgC = 0; // set counter to '0'
function fade() { // introduce our function
var img = $('.myDivgallery img');
var imgL = img.length; // get the number of images
timeout = setTimeout(function() {
imgC++; // count +1
img.eq(imgC-1).fadeIn().siblings('img').fadeOut();
if ( imgC >= imgL){ // if counter goes over our number of images...
imgC = 0; // reset the counter to '0'
}
fade(); // run our function in a loop
}, 2000); // timeout delay
}
fade(); // start our function
再次阅读...... B. A. D. ......!糟糕坏事