Question

任何人都可以帮助我解决这方面的淡入淡出功能，当我尝试将其中一个因为某种原因搞砸了脚本时，我试图让新图像淡入而不仅仅是替换旧的，或快速淡出淡出，谁能给我任何指针？感谢

    <script type="text/javascript">
    function carousel_bg(id) {
            var bgimgs = [ 'banner-two.jpg', 'banner-three.jpg', 'banner-four.jpg' ]; // add images here..
            var img = bgimgs[id];
            var cnt = 3; // change this number when adding images..

            $('#main_banner').css("background-image", "url(img/"+img+")");
            id = id + 1;
            if (id==cnt) id = 0;

            setTimeout("carousel_bg("+id+")", 1000);
    }

    $(document).ready(function() {
            carousel_bg(0);     
    });

Answer 1

试试这个

var bgimgs = [ 'banner-two.jpg', 'banner-three.jpg', 'banner-four.jpg' ];
var cnt = bgimgs.length;
var id = 0;

function carousel_bg() {          
  var img_link = bgimgs[id];
  $('#main_banner').css("background-image","url('"+img_link+"')").fadeIn('slow');
  id = id + 1;
  if (id == cnt) id = 0;
 }

$(document).ready(function() {
  carousel_bg();

  setInterval(function(){
     $('#main_banner').fadeOut('slow',function(){
         carousel_bg();
     });
  }, 1000);
});

小提琴示例：http://jsfiddle.net/AaRgR/1/

Answer 2

如果您想要淡化效果，则需要两个<div>元素：

<div id="main_banner">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

使用CSS，更改内部div的样式，使它们相互叠加，使.div2显示在.div1上：

#main_banner
{
    position:relative;
    width:600px;
    height:300px;
}

#main_banner > div
{
    position:absolute;
    top:0;
    left:0;
    width:600px;
    height:300px;
}

.div1
{
    z-index: 1;
}

然后，你的脚本应该知道它，所以你必须把它改成这样的东西：

var activeId = 0;

function carousel_bg(id) {
    var bgimgs = [ 'banner-two.jpg', 'banner-three.jpg', 'banner-four.jpg' ]; // add images here..

    $('.div1').css("background-image", "url(img/"+bgimgs[activeId]+")");
    $('.div2').hide().css("background-image", "url(img/"+bgimgs[id]+")").fadeIn();

    activeId = id;

    id = (id + 1) % bgimgs.length; // 0, 1, 2, 0, 1, 2, ...

    setTimeout("carousel_bg("+id+")", 1000);
}

$(document).ready(function()
{
        carousel_bg(0);     
});

DEMO

将jquery淡入淡出函数添加到我的后台旋转脚本中

2 个答案: