바디 배경 이미지 회전은 동적 이미지 수를 지원해야합니다.

Question

jquery 슬라이드 쇼를 사용하여 배경 이미지를 회전 시켰습니다. 하지만 제 요구 사항은 특정 날짜에 따라 배경 이미지를 표시해야한다는 것입니다. 나는 한 번에 한 이미지를 회전해야하고, 세 번, 그리고 세 번 이상 이렇게 회전시켜야한다는 것을 의미합니다. 이 스크립트에서는 매번 스크립트를 변경해야합니다. 스크립트를 변경하지 않고 어떻게 배경 이미지를 동적으로 회전시킬 수 있습니까? 누구든지 솔루션을 PLZ 내게 몇 가지 샘플 스크립트를 제안했다면. 나는 아래 위 script.And에 봉착

var slideshowSpeed = 6000; 
var photos = [ 
    {image1.png}, 
    {image2.png}, 
    {image3.png} 
]; 
$(document).ready(function() { 
    $("#back").click(function() { 
     stopAnimation(); 
     navigate("back"); 
    }); 
    $("#next").click(function() { 
     stopAnimation(); 
     navigate("next"); 
    }); 
    var interval; 
    $("#control").toggle(function() { 
     stopAnimation(); 
    }, function() { 
     $(this).css({"background-image":"url(images/btn_pause.png)"}); 
     navigate("next"); 
     interval = setInterval(function() { 
      navigate("next"); 
     }, slideshowSpeed); 
    }); 
    var activeContainer = 1; 
    var currentImg = 0; 
    var animating = false; 
    var navigate = function(direction) { 
     if (animating) { 
      return; 
     } 
     if (direction == "next") { 
      currentImg++; 
      if (currentImg == photos.length + 1) { 
       currentImg = 1; 
      } 
     } else { 
      currentImg--; 
      if (currentImg == 0) { 
       currentImg = photos.length; 
      } 
     } 
     var currentContainer = activeContainer; 
     if (activeContainer == 1) { 
      activeContainer = 2; 
     } else { 
      activeContainer = 1; 
     } 
     showImage(photos[currentImg - 1], currentContainer, activeContainer); 
    }; 
    var currentZindex = -1; 
    var showImage = function(photoObject, currentContainer, activeContainer) { 
     animating = true; 
     currentZindex--; 
     $("#headerimg" + activeContainer).css({"background-image":"url(images/" + photoObject.image + ")","display":"block","z-index":currentZindex}); 
     $("#headertxt").css({"display":"none"}); 
     $("#firstline").html(photoObject.firstline); 
     $("#secondline").attr("href", photoObject.url).html(photoObject.secondline); 
     $("#pictureduri").attr("href", photoObject.url).html(photoObject.title); 
     $("#headerimg" + currentContainer).fadeOut(function() { 
      setTimeout(function() { 
       $("#headertxt").css({"display":"block"}); 
       animating = false; 
      }, 500); 
     }); 
    }; 
    var stopAnimation = function() { 
     $("#control").css({"background-image":"url(images/btn_play.png)"}); 
     clearInterval(interval); 
    }; 
    navigate("next"); 
    interval = setInterval(function() { 
     navigate("next"); 
    }, slideshowSpeed); 
}); 

당신은 현재 날짜를 기준으로 var photos을 반환하는 간단한 자바 스크립트 함수를 만들 수 있습니다 내 HTML

<div id="headerimgs"> 
    <div id="headerimg1" class="headerimg"></div> 
    <div id="headerimg2" class="headerimg"></div> 
    <div id="headerimg3" class="headerimg"></div> 
</div> 

Answer 1

입니다.

function getPhotos() { 
    var currentDate = new Date(), 
     photos; 

    if (currentDate === new Date("December 25, 2012")) { 
     photos = [{ .... }]; 
    } 
    return photos; 
} 

그리고 당신의 코드가 될 것이다 :

var photos = getPhotos(); 

Answer 2

당신은 ..

var d = new Date(); 
var n = d.getDay(); 

이 인 일 찾는 데 사용할 수있는 및 이미지 회전 나는 raphael 라이브러리를 추천 할 것입니다. 이 기능은 대부분의 브라우저 (Firefox 3.0 이상, Safari 3.0 이상, Chrome 5.0 이상, Opera 9.5 이상, Internet Explorer 6.0 이상)와 호환되며 사용하기가 쉽습니다.