크로스 페이드 전환으로 임의의 배경 이미지 회전

내 웹 사이트에 15 개의 배경 이미지가 있습니다. 그들은 모두 1024 x 768 픽셀이며 사용자가 페이지를로드 할 때마다 무작위로로드됩니다. 그 외에도 이미지는 브라우저 창 크기에 상관없이 전체 화면을 채 웁니다.크로스 페이드 전환으로 임의의 배경 이미지 회전

저는 성취하고자하는 것을 고집했습니다. 크로스 페이드 전환을 사용하여 매 n 초마다 이미지를 임의로 회전 시키길 원합니다. 나는 그 주제에 관한 튜토리얼 톤처럼 읽었지만 여전히 그것을 파악할 수는 없다.

미리 감사드립니다.

이 코드입니다 :

<head> 
<title>Test</title> 
<link rel="stylesheet" type="text/css" href="css/style.css" /> 
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="js/jquery.fullscreenr.js" type="text/javascript"></script> 
<script type="text/javascript"> 

var FullscreenrOptions = {width: 1024, height: 768, bgID: '#bgimg'}; 
      jQuery.fn.fullscreenr(FullscreenrOptions); 

var randnum = Math.random(); 
var inum = 15; 
var rand1 = Math.round(randnum * (inum-1)) + 1; 

images = new Array 
images[1] = "images/contactBG01.jpg" 
images[2] = "images/contactBG02.jpg" 
images[3] = "images/contactBG03.jpg" 
images[4] = "images/contactBG04.jpg" 
images[5] = "images/contactBG05.jpg" 
images[6] = "images/contactBG06.jpg" 
images[7] = "images/contactBG07.jpg" 
images[8] = "images/contactBG08.jpg" 
images[9] = "images/contactBG09.jpg" 
images[10] = "images/contactBG10.jpg" 
images[11] = "images/contactBG11.jpg" 
images[12] = "images/contactBG12.jpg" 
images[13] = "images/contactBG13.jpg" 
images[14] = "images/contactBG14.jpg" 
images[15] = "images/contactBG15.jpg" 
onload=function(){ 
    document.getElementById("bgimg").src=images[rand1]; 
} 
</script> 
    </head>   
    <body> 
<img id="bgimg" src="" />  
<div id="realBody"> 
     <img id="exampleDiv" src="images/contact_top.png"/><br> 
     <img id="exampleDivBottom" src="images/contact_pie.gif">   
    </div> 
</body> 
</html>

출처

2011-10-11 Anonymous

jQuery를가 옵션 인 경우 도움이

// Wait for DOM-ready, don't use `window.onload` 
$(function() { 
    // The image we are going to be updating 
    var img = $("#bgimg"), 
     // The number of seconds between transitions 
     every = 15 * 1000, 
     // The speed at which to fade, can be: 'slow', 
     // 'medium, 'fast', or a number (in milliseconds) 
     fadeSpeed = "slow", 
     // The images to cycle through 
     imgs = [ 
      "images/contactBG01.jpg", 
      "images/contactBG02.jpg", 
      "images/contactBG03.jpg", 
      "images/contactBG04.jpg", 
      "images/contactBG05.jpg", 
      "images/contactBG06.jpg", 
      "images/contactBG07.jpg", 
      "images/contactBG08.jpg", 
      "images/contactBG09.jpg", 
      "images/contactBG10.jpg", 
      "images/contactBG11.jpg", 
      "images/contactBG12.jpg", 
      "images/contactBG13.jpg", 
      "images/contactBG14.jpg", 
      "images/contactBG15.jpg" 
     ]; 

    // Use setTimeout to schedule the image to be updated 
    // periodically 
    setTimeout(function() { 
     // Fade the image out, then when done... 
     img.fadeOut(fadeSpeed, function() { 
      // Use the length of the array to generate a number 
      var newSrc = imgs[Math.round(Math.random * (imgs.length-1)) + 1]; 
      // Replace the src, then fade back in 
      img 
       .attr("src", newSrc) 
       .fadeIn(fadeSpeed) 
    }, every); 
});

희망! 건배.

출처

2011-10-11 18:17:30 keeganwatkins

시간 내 주셔서 대단히 감사합니다. keeganwatkins, 잠시 후에 사용해 보도록하겠습니다. 작동하게 만들 수 있는지 알려 드리겠습니다. –

크로스 페이드 전환으로 임의의 배경 이미지 회전

답변

관련 문제