Changing slideshow images according to season-Possible conflict with jquery cycle plugin?

Question

I am trying to automatically show images based on what month it is with javascript. I am also using the jquery cycle plugin for the slide show. I originally just had the images within the HTML and everything was copacetic. Now when loading the images source with javascript there is a long pause before the first picture loads up and also after one picture fades out and another fades in. When I originally got the slide show working I had to fuss around with the settings to keep it from having similar long pauses. I'm wondering if the javascript is interfering with the cycle plugin settings (or something else) and if there is a better way to do this (jquery or if my js is just screwy). The clients server doesn't have PHP on it so that's not an option.

Thanks in advance! Be well!

This calls the function in the further below external js file from the .html file:

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

External js file:

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

First of all you should change:

var currentMonth = new Date();

To

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