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') =＆＃39; main-2.jpg and we call the function with changeImagesByButton（＆＃39; left＆＃39;）`那么当前将= 1并更改图片。

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

Answer 2

.main {
    -webkit-transition: background .7s linear;
       -moz-transition: background .7s linear;
         -o-transition: background .7s linear;
        -ms-transition: background .7s linear;
            transition: background .7s linear;
}

当然.main div必须有高度和宽度。

此css代码通过转换更改背景，更多关于此处的图像转换：http://css3.bradshawenterprises.com/cfimg/

如何每隔X秒使用jQuery更改背景图像（使用淡入淡出）

2 个答案: