我目前有一个使用 JQuery 循环插件的网站。该站点使用该插件来更改主背景图像。循环插件还在 HTML 中创建了一个分页部分,在我的例子中,我已将其自定义为一组图像。
我想做的是在激活特定“页面”后更改寻呼机图像。我已经设法改变了图像,但由于该网站在整个过程中使用了相当平滑的过渡,我希望从一个图像到另一个图像平滑淡入淡出,然后再返回。
您现在可以在这里看到一个例子:http://pegaso.mammalworld.com/将鼠标悬停在“画廊”图像上,您可以看到它是如何运作的。
这是我需要修改的功能,而不是 Jquery 使用的淡出/淡入,理想情况下它会是一个简单的淡出到下一个图像源然后再次淡出:
function onAfter() {
var myclass = $( ".activeSlide" ).find('img').attr('class');
//alert(myclass);
switch (myclass) {
case "image-1":
$(".image-1").attr("src","/images/image_small_01_off.jpg");
$('.image-2').fadeTo('fast', 0.5, function() {
$(this).attr("src","/images/image_small_02.jpg").fadeTo("slow", 1);
});
break;
case "image-2":
$(".image-2").attr("src","/images/image_small_02_off.jpg");
$('.image-3').fadeTo('slow', 1, function() {
$(this).attr("src","/images/image_small_03.jpg").fadeTo("slow", 1);
});
break;
case "image-3":
$(".image-3").attr("src","/images/image_small_03_off.jpg");
$('.image-4').fadeTo('slow', 1, function() {
$(this).attr("src","/images/image_small_04.jpg").fadeTo("slow", 1);
});
break;
case "image-4":
$(".image-4").attr("src","/images/image_small_04_off.jpg");
$('.image-5').fadeTo('slow', 1, function() {
$(this).attr("src","/images/image_small_05.jpg").fadeTo("slow", 1);
});
break;
case "image-5":
$(".image-5").attr("src","/images/image_small_05_off.jpg");
$('.image-6').fadeTo('slow', 1, function() {
$(this).attr("src","/images/image_small_06.jpg").fadeTo("slow", 1);
});
break;
case "image-6":
$(".image-5").attr("src","/images/image_small_05_off.jpg");
$('.image-6').fadeTo('slow',1, function() {
$(this).attr("src","/images/image_small_06.jpg").fadeTo("slow", 1);
});
break;
default :
$(".image-1").attr("src","/images/image_small_01_off.jpg");
$(".image-2").attr("src","/images/image_small_02_off.jpg");
$(".image-3").attr("src","/images/image_small_03_off.jpg");
$(".image-4").attr("src","/images/image_small_04_off.jpg");
$(".image-5").attr("src","/images/image_small_05_off.jpg");
$(".image-6").attr("src","/images/image_small_06_off.jpg");
break;
}
}
更新
要查看网站上的效果,只需将鼠标悬停在画廊上,观察背景图像的变化,从而改变整个页面图像。淡入淡出需要像背景图像一样平滑...
请帮忙! :)
最佳答案
在您有两个固定图像的情况下,这并不难。
- 将容器背景设置为您想要淡出的图像。
jQuery 函数淡出图像,显示背景图像。
$('img').hover(function() { $(this).animate({ opacity: 0 }, 500); }, function() { $(this).animate({ opacity: 1 }, 500); });
- 利润。
fiddle
关于javascript - 如何使用 JQuery 淡入图像变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3713819/