Body Background Image回転は画像の動的数をサポートする必要があります

Question

jqueryスライドショーを使用して背景画像を回転しました。しかし、私の要件は、私は特定の日に応じて背景画像を表示する必要があります。私は、1つのイメージを回転させなければならない時があり、3回、3回、3回以上回転しなければならないことを意味します。このためには毎回スクリプトを変更する必要があります。スクリプトを変更せずに背景画像を動的に回転させる方法誰かがソリューションplzを持っている場合私にいくつかのサンプルスクリプトをお勧めします。

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

私は以下script.Andの上に抱えているあなたは、現在の日付に基づいてvar photosを返す単純なJavaScript関数を作ることができ、私の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以上）と互換性があり、使いやすくなっています。