Body Background Image Rotation sollte dynamische Anzahl von Bildern unterstützen

Question

Ich habe jquery Diashow verwendet, um Hintergrundbilder zu drehen. Aber was meine Anforderung ist, muss ich Hintergrundbilder entsprechend den spezifischen Tagen anzeigen. Ich meine, manchmal muss ich ein Bild drehen, mal 3 und manchmal mehr als 3 so. Für diesen muss ich das Skript jedes Mal ändern. Wie kann ich Hintergrundbilder dynamisch drehen, ohne mein Skript zu ändern? Wenn jemand eine Lösung hat, empfehlen Sie mir ein Beispielskript.

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

ich die oben script.And unten habe, ist mein 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

Sie können eine einfache JavaScript-Funktion machen, die die var photos liefert basierend auf dem aktuellen Datum.

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

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

Und Ihr Code sein:

var photos = getPhotos(); 

Answer 2

können Sie verwenden

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

zu finden, welcher Tag es ist .. Und für Bildrotation würde ich raphael Bibliothek empfehlen. Dies ist in den meisten Browsern (Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ und Internet Explorer 6.0+) kompatibel und sehr einfach zu bedienen.