如何使用jQuery每X秒（淡入）來更改背景圖片

我有一個內置網頁，我真的不能碰的HTML結構，所以請仔細閱讀：如何使用jQuery每X秒（淡入）來更改背景圖片

第一：

那頁我有有一個background-image: url('main-1.jpg');我希望它每3秒更換一次main-2.jpg和main-3.jpg。

二：

我有與類頁面兩側的兩個箭頭按鈕：l-arrow（左箭頭）和r-arrow（右箭頭）。

所有的圖像變化都必須包含淡入淡出效果！

我不能堆疊在彼此的圖像，因爲它是最主要的股利

這是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/當然

來源

2015-08-09 Rick Sanchez

我們能看到你的HTML結構呢？從jQuery中獲得幫助有點困難。 – BurningLights

你應該也把HTML！ – Varun

添加jsfiddle @Varun –

爲什麼不這樣做的動畫，然後更改背景圖片和復活？

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') =「主2.JPG and we call the function with changeImagesByButton（」左「）`當時的意志功能= 1並更改圖像。

如果我們稱'left'功能和當前圖像的主1.JPG函數將返回，而不是做任何事情:)

來源

2015-08-09 13:45:15 sourRaspberri

你能解釋你的代碼嗎？東西沒有太大的意義.. –

哪一點你沒有得到？ :)基本上你想要做圖像自動化的正確？在一個按鈕按下你想要去1,2,3和相反的另一個？我對嗎？ – sourRaspberri

no ..通過點擊箭頭切換圖像+圖像自動移動 –

.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; 
}

中。主要div有以具有的高度和寬度。

這個CSS代碼使過渡背景變化，進一步瞭解imagetransitions這裏：http://css3.bradshawenterprises.com/cfimg/

來源

2015-08-09 13:34:37 scarto

如何使用jQuery每X秒（淡入）來更改背景圖片

回答

相關問題