JQuery와 $ ('몸') 이미지 스왑 도움

Question

나는 아래의 코드가 있습니다

1. 그것은 단지 이미지를 통해 루프 번, 무엇을 생각한다 : 나는 지원이 문제를 해결 필요

   $(document).ready(function() { 
       var bgimages=new Array() 
       bgImages[0]="bg.jpg" 
       bgImages[1]="bg2.jpg" 
       //sloppy preload images 
       var pathToImg=new Array() 
       for (i=0;i<bgImages.length;i++) 
       { 
       pathToImg[i]=new Image() 
       pathToImg[i].src=bgImages[i] 
       } 
   
       var i = 0; 
       var rotateBg = setInterval(
       function(){ 
       $('body').css({backgroundImage:'url(' + bgImages[i] + ')'}); 
        i++; 
       }, 9000); 
   }); 
   

   을 내가 빠졌어? 끊임없이 반복하고 싶습니다.

2. 이미지를 어떻게 페이드 크로스 할 수 있습니까?

Answer 1

당신은 당신의 상한을 넘어 인덱스를하지 않도록 할 필요가 배열의 끝에 도달이 내가 0마다 재설정됩니다

function(){ 
i=i<bgImages.length?i:0; 
$('body').css({backgroundImage:'url(' + bgImages[i] + ')'}); 
     i++; 
    } 
} 

을 시도 할 수 있습니다 귀하의 배열. 크로스 페이드를 들어

i++; i %= bgImages.length; 

: 당신이 당신의 배열에 더 많은 요소를 가지고 있다면

i ^= 1; 

는 모듈로 연산이 일을 할 것입니다 : 귀하의 경우

는 단순한 비트 XOR은 일을 CSS transitions을 고려해 볼 수 있습니다. 페이지에 예제가 있습니다. 그러나 이것은 W3C 작업 초안이며 현재는 Webkit 기반 브라우저에서만 지원합니다. Firefox는 연말 전에 지원해야합니다. IE가 언제 그것을 지원할 지에 대한 어떠한 말도하지 않습니다. 좋은 점은 JS를 만들 필요가 없다는 것입니다.

발췌 :

<style type="text/css"> 
div.fader img { -webkit-transition: all 1s ease-in-out; } 
img.swap1, div.fader:hover img.swap2 { opacity: 1.0; } 
div.fader:hover img.swap1, img.swap2 { opacity: 0; } 
</style> 

Answer 2

당신은