jquery crossfade-努力使jquery crossfade效果生效

这是我处理背景图像的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);

        });

//创建幻灯片
var slideArray=[“bg1”、“bg2”、“bg3”、“bg4”、“bg5”、“bg6”]；
//将第一个图像添加到主照片面板
$（'#main photo'）.addClass（slideArray[0]）；
//添加图像导航
$（“#img控件”）.append（“
”）；
//获取幻灯片长度
var slideLength=slideArray.length；
//创建循环和其他东西
对于（i=0；i”）；
}
$（'mybg li a'）.bind（'click'，function（）{
var numSlide=$（this.attr（'rel'）；
var img2rem=$（'#mainphoto'）.attr（'class'）；
$（“#主照片”）.fadeOut（'normal'，function（）{
$（'#mainphoto'）.addClass（numSlide.fadeIn（'slow'，function（））{
$（#main photo'）.removeClass（img2rem）；
});
});
$（'mybg li a'）.removeClass（'active'）；
$（this.addClass（'active'）；
log（“numslide:+numslide”）；
日志（“img2rem:+img2rem”）；
});

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

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

---

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

您可以使用Nivoslider。这是一个免费使用的jQuery插件，它有很多很酷的转换，甚至还有一个自动播放功能。它还将节省您的编码时间

首先，脚本中缺少一个结尾

。不可能将一个元素与两个背景图像叠加并使其褪色。他们两个。很抱歉，你走错了路。我将创建两个主要的重叠bg持有人，然后只交换z指数较高的一个，改变bg sym。在他们两人身上。解释起来有点棘手。好吧，我修正了结束语。谢谢你指出这一点。呃，我只是改变了我的方式，做了一个带img标签的div，我只是改变了它的工作方式。我想尝试找出如何以我想要的方式使用背景图像。但是生命太短暂了，不能在这些琐碎的细节上浪费这么多时间。不管怎样，我现在身体很好。谢谢你的帮助。但是它会在背景图像之间转换吗？这就是我要找的。