Changement des images du diaporama en fonction de la saison-Conflit possible avec le plugin jquery cycle?

Question

J'essaie d'afficher automatiquement les images en fonction de quel mois il est avec javascript. J'utilise aussi le plugin jquery cycle pour le diaporama. Au départ, j'avais juste les images dans le HTML et tout était copacétique. Maintenant, lors du chargement de la source d'images avec javascript il y a une longue pause avant que la première image se charge et aussi après qu'une image s'estompe et une autre se fane. Quand j'ai commencé le diaporama, je devais régler les paramètres pour le garder d'avoir de longues pauses similaires. Je me demande si le javascript interfère avec les paramètres du plugin de cycle (ou quelque chose d'autre) et s'il y a une meilleure façon de le faire (jquery ou si mon js est juste visqueux). Le serveur client n'a pas de PHP dessus donc ce n'est pas une option.

Merci d'avance! Soyez bien!

Cela appelle la fonction dans le plus bas js externe à partir du fichier .html:

<div class="slideshow"> 
    <script type="text/javascript"> 
     retrievePictures(); 
    </script> 
</div> 

dossier externe:

function retrievePictures(){ 
var currentMonth = new Date(); 
if(currentMonth >= 11 || currentMonth <=4){ 
//winter 
    var html = '<img src="images/slider/shuksanWinter.jpg" width="600" height="400" alt="Mt Shuksan in winter" /> <br /><img src="images/slider/breakfastEveryone.jpg" alt="Breakfast" width="600" height="400" /> <br /><img src="images/slider/snowCamp.jpg" width="600" height="400" alt="Snow Camp" /> <br /><img src="images/slider/treesShoer.jpg" width="600" height="400" alt="Snow Shoers in Trees" /> <br /><img src="images/slider/bellRingingSliderLessNoise.jpg" alt="Ringing the bell for breakfast" width="600" height="400" /> <br /><img src="images/slider/poles.jpg" width="600" height="400" alt="Snow Shoeing Poles" /> <br /><img src="images/slider/games.jpg" alt="Game shelves" width="600" height="400" /> <br /><img src="images/slider/tableAbove.jpg" alt="Table setting" width="600" height="400" /> <br /><img src="images/slider/personSlider.jpg" alt="Meal preparation conversation" width="600" height="400" /> <br /><img src="images/slider/kitchenEmpty.jpg" alt="Empty kitchen" width="600" height="400" /> <br />'; 
    document.write(html); 
} 
else{ 
//summer  
    var html = '<img src="images/slider/breakfastEveryone.jpg" alt="Breakfast" width="600" height="400" /> <br /><img src="images/slider/backYardViewPanorama2Slider.jpg" alt="The backyard view" width="600" height="400" /> <br /><img src="images/slider/bellRingingSliderLessNoise.jpg" alt="Ringing the bell for breakfast" width="600" height="400" /> <br /><img src="images/slider/boardWalkSlider.jpg" alt="Picture Lake boardwalk" width="600" height="400" /> <br /><img src="images/slider/bootWallSlider.jpg" alt="Downstairs bootwall" width="600" height="400" /> <br /><img src="images/slider/breakfastCommenceSliderLessNoise.jpg" alt="Dinning room" width="600" height="400" /> <br /><img src="images/slider/breakfastTalk.jpg" alt="Dinning room talk" width="600" height="400" /> <br /><img src="images/slider/bunksDoorways.jpg" alt="Sleeping room doorways" width="600" height="400" /> <br /><img src="images/slider/couple.jpg" alt="Mountaineers!" width="600" height="400" /> <br /><img src="images/slider/dewyGrassSlider.jpg" alt="Morning grass" width="600" height="400" /> <br /><img src="images/slider/dinningViewZoomHighPassVivid.jpg" alt="View from the dinning room" width="600" height="400" /> <br />       <img src="images/slider/games.jpg" alt="Game shelves" width="600" height="400" /> <br /><img src="images/slider/kitchenEmpty.jpg" alt="Empty kitchen" width="600" height="400" /> <br /><img src="images/slider/lodgeLightsMediumHighPassVividLessNoise.jpg" alt="Morning lights at the lodge" width="600" height="400" /> <br /><img src="images/slider/pancakeMakersLessNoise.jpg" alt="Pancake makers" width="600" height="400" /> <br /><img src="images/slider/personSlider.jpg" alt="Meal preparation conversation" width="600" height="400" /> <br /><img src="images/slider/pancakePourLessNoise.jpg" alt="Pouring batter" width="600" height="400" /> <br /><img src="images/slider/pictureLakeSlider.jpg" alt="Picture Lake" width="600" height="400" /> <br /><img src="images/slider/saltSyrupBowlsBrighterLessNoise.jpg" alt="Meal shelves" width="600" height="400" /> <br /><img src="images/slider/wetLandsLessNoise.jpg" alt="Picture Lake" width="600" height="400" /> <br /><img src="images/slider/tableAbove.jpg" alt="Table setting" width="600" height="400" /> <br /><img src="images/slider/windowSillouetteSliderMoreWindowLessNoise.jpg" alt="A view while eating" width="600" height="400" /> <br />'; 
    document.write(html); 
} 
} 

Answer 1

Tout d'abord vous devez changer:

var currentMonth = new Date(); 

À

var currentMonth = new Date().getMonth();