3

我目前有一个使用 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;
    }

}

更新

要查看网站上的效果,只需将鼠标悬停在图库上并观察背景图像的变化,从而在整个过程中更改寻呼机图像。淡入淡出需要像背景图像一样平滑......

请帮忙!:)

4

1 回答 1

1

在您有两个固定图像的情况下,这并不难。

  1. 将容器背景设置为要淡入淡出的图像。
  2. jQuery函数淡出图像,露出背景图像。

    $('img').hover(function() {
         $(this).animate({
             opacity: 0
         }, 500);
     }, function() {
         $(this).animate({
             opacity: 1
         }, 500);
     });​
    
  3. 利润。

小提琴

http://jsfiddle.net/v6dtE/

于 2010-09-15T00:51:00.737 回答