jquery - 如何每 X 秒使用 jQuery 更改背景图像(带淡入淡出)

Question

我有一个构建页面，我不能真正接触 HTML 结构，所以请仔细阅读:

首先:

我的那个页面有一个 background-image: url('main-1.jpg'); 我希望它每 3 秒更改为 main-2.jpg 和 main-3。 jpg。

第二个:

我在带有类的页面两侧有两个箭头按钮:l-arrow(左箭头)和 r-arrow(右箭头)。

所有图像更改都必须以某种方式在其中包含淡入淡出效果!

我不能将图像相互堆叠，因为它是主 div

这是我一直以来使用的 jQuery，即使是现在，按钮也不起作用:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">

  $(document).ready(function(){

      var count = 1; 

      $(".r-arrow").click(function{
          if ( count == 1 ) {
              count = 2; 
              $('.main').css("background-image", "url(main-2.jpg)");  
          } else if (count == 2) {
            count == 3;
              $('.main').css("background-image", "url(main-3.jpg)");  
          } else if (count == 3) {
            count == 1; 
              $('.main').css("background-image", "url(main-1.jpg)");  
          }
          console.log(count);
      })

      $(".l-arrow").click(function{
          if ( count == 1 ) {
              count = 3; 
              $('.main').css("background-image", "url(main-3.jpg)");  
          } else if (count == 2) {
            count == 1;
              $('.main').css("background-image", "url(main-1.jpg)");  
          } else if (count == 3) {
            count == 2; 
              $('.main').css("background-image", "url(main-2.jpg)");  
          }
      })


  });

</script>

可能是什么问题？

我添加了一个 jsfiddle 作为示例:http://jsfiddle.net/4eyv7td9/

Answer 1

为什么不制作动画然后更改背景图像并重新激活？

function changeImages(direction){
    switch(direction){
    case"left":
        for(i=3;i==0;i--){
            $('.main').animate({'opacity':0},500,function(){$(this).css({'background-image':'url("main-'+i+'.jpg")'}).animate({'opacity':1},500);});
        }
    break;
    case"right":
        for(i=0;i<=3;i++){
            $('.main').animate({'opacity':0},500,function(){$(this).css({'background-image':'url("main-'+i+'.jpg")'}).animate({'opacity':1},500);});
        }
    break;
    }
}
$('.r-arrow').click(changeImages('right'));
$('.l-arrow').click(changeImages('left'));
//you may want to write it like this instead if you're using an anchor? 
$('.r-arrow').click(function(e){
    e.preventDefault();
    changeImages('right');
});

编辑

抱歉，我误解了您的意思。这里有一个函数，它将获取当前图像并相应地改变方向:)

function changeImageByButton(direction){
    int current=$('.main').css('background-image').split('-');//split main-1.jpg into 'main' '1.jpg' making int will force 1
    swtich(direction){
        case"left":
            if(current==1)return;//cannot go any further
            current--;
        break;
        case"right":
            if(current==3)return;
            else current++;
        break;
    }
    $('.main').css({'background-image':'url("main-'+current+'.jpg")'});
}

现在这个函数会做什么，如果 $('.main').css('background-image') = 'main-2.jpg 我们调用这个函数changeImagesByButton('left')` 然后 current 将 = 1 并更改图像。

如果我们用 'left' 调用函数并且当前图像是 main-1.jpg 函数将返回并且不做任何事情:)