1

这是我处理背景图像的 css - 我在样式表的另一部分设置了宽度和高度，所以这不是问题：

#mainphoto.bg1 { background-image:url(../images/site/homepg_img_1.jpg); background-repeat:no-repeat;}
#mainphoto.bg2 { background-image:url(../images/site/homepg_img_2.jpg); background-repeat:no-repeat;}
#mainphoto.bg3 { background-image:url(../images/site/homepg_img_3.jpg); background-repeat:no-repeat;}
#mainphoto.bg4 { background-image:url(../images/site/homepg_img_4.jpg); background-repeat:no-repeat;}
#mainphoto.bg5 { background-image:url(../images/site/homepg_img_5.jpg); background-repeat:no-repeat;}
#mainphoto.bg6 { background-image:url(../images/site/homepg_img_6.jpg); background-repeat:no-repeat;}

我的 HTML 非常基本：

 <div id="mainphoto">
       <div id="img-controls"></div>
 </div>

最后是jquery：

// create slidearray
 var slideArray = ["bg1", "bg2", "bg3", "bg4", "bg5", "bg6"];

        // add first image to the mainphoto panel 
        $('#mainphoto').addClass(slideArray[0]);

        // add the image navigation
        $('#img-controls').append('<ul id="mybg"></ul>');

        // get the slidelength
        var slideLength = slideArray.length;

        // create the loop and stuff
        for(i=0; i < slideLength; i++) {
            var slideText = i + 1;
            $('#mybg').append('<li class="bg'+slideText+'"><a href="#" rel="bg'+slideText+'"><img src="images/site/img-bullets.png" border="0" ></a></li>');
        }

        $('#mybg li a').bind('click', function(){
            var numSlide = $(this).attr('rel');
            var img2rem = $('#mainphoto').attr('class');

            $('#mainphoto').fadeOut('normal', function(){
                $('#mainphoto').addClass(numSlide).fadeIn('slow', function() {
                    $('#mainphoto').removeClass(img2rem);                           
                });
            });

            $('#mybg li a').removeClass('active');
            $(this).addClass('active');

            console.log("numslide: " +numSlide);
            console.log("img2rem: " +img2rem);

        });

所以我想要它做的是我制作的 css 类之间的交叉淡入淡出效果。但基本上它所做的是初始图像淡出，然后新图像淡入。但我希望这些动画同时发生，创建交叉淡入淡出效果。

我想做的下一件事是让它们自动播放，这样用户就不必单击项目符号来加载下一个图像。我不太确定该怎么做。

我见过的大多数 jquery 滑块都使用图像标签，但我必须将图像用作背景图像，因为我有导航和页面中正在进行的其他事情，这会使使用标签变得复杂。我现在只是有点困惑如何使这种交叉淡入淡出效果发生。非常感谢您提供任何帮助。

4

1 回答 1

0

您可以使用 Nivoslider http://nivo.dev7studios.com/。这是一个免费使用的 jQuery 插件，它有很多很酷的过渡，甚至还有自动播放功能。它还可以节省您的编码时间..

于 2012-05-06T11:39:45.150 回答