jQuery的淡入淡出 - 挣扎着爬一个jquery淡入淡出效果的工作

这里是我的CSS来处理我的背景图片 - 我有宽度和高度在我的样式表的另一部分设置，所以那不是问题：jQuery的淡入淡出 - 挣扎着爬一个jquery淡入淡出效果的工作

#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); 

     });

小号o我希望它做的是我所做的CSS类之间的交叉淡入淡出效果。但基本上它所做的是初始图像淡出，然后新图像淡入。但我希望这些动画同时发生，并创建交叉渐变效果。

我想要做的下一件事是让他们自动播放，所以用户不必点击项目符号来下载图片。我不太确定如何做到这一点。

我见过的大多数jQuery滑块使用图片标签，但我必须使用图片作为背景图片，因为我有导航和其他事情在页面上进行，否则会使它使用标签变得复杂。目前我只是有点困惑如何使这种交叉淡入淡出效果发生。预先感谢任何帮助。

来源

2012-05-05 Robbiegod

首先，您在脚本中缺少结尾''。这是不可能的，用两个背景图像叠加一个元素并淡出显示。两个都。很抱歉，但你走错了路。我会创建2个主要的覆盖bg持有者，并且只交换z-index较高的一个，改变bg sym。在他们两个。有点棘手的解释。 –

好的，我修复了收盘价。感谢您指出了这一点。 – Robbiegod

呃，我刚刚放弃了我这样做的方式，并制作了一个带有img标签的div，我只是改变了它的工作方式。我想试图弄清楚如何以我想要的方式使用背景图片。但是，生命太短，不能浪费这么多时间在这些微不足道的细节上。无论如何，我现在状况良好。谢谢你的帮助。 – Robbiegod

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

来源

2012-05-06 11:39:45

但是它会在背景图像之间转换吗？这就是我一直在寻找的东西。 – Robbiegod

jQuery的淡入淡出 - 挣扎着爬一个jquery淡入淡出效果的工作

回答

相关问题