Question

这是我的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滑块都使用了图像标签，但是我必须使用图像作为背景图像，因为我有导航和页面中正在进行的其他事情，这使得使用标签变得复杂。我现在只是有点困惑如何使这种交叉渐变效果发生。非常感谢任何协助。

Answer 1

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

jquery crossfade - 努力让jquery交叉淡入淡出效果起作用

1 个答案: