A script for a photo gallery/slideshow I'm a beginner in JavaScript.  I wrote this code so the main image get set on whatever thumbnail image the user clicks. 

And if the user didn't click on any image the main photo get changed every 10 seconds. 

Here's my code (I feel like I'm doing some unnecessary work here in the timers but I can't figure it out): 

HTML:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Photo Gallery&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;        
&lt;/head&gt; 
&lt;body&gt;
    &lt;div id="mainContainer"&gt;
        &lt;div id="mainImage"&gt;
            &lt;img src="img/Flowers_by_Deidameia.jpg" /&gt;
        &lt;/div&gt;

        &lt;div id="thumbnails"&gt;
            &lt;img class="imgThumbnails" src="img/Flowers_by_Deidameia.jpg"/&gt;
            &lt;img class="imgThumbnails" src="img/flower.jpg"/&gt;
            &lt;img class="imgThumbnails" src="img/cone-flowers-preview.jpg" /&gt;
            &lt;img class="imgThumbnails" src="img/two_flowers.jpg" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="imgCaption"&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;


JavaScript:

window.onload = function(){
    var mainImage = document.getElementById("mainImage").getElementsByTagName("img")[0],
        thumbnailImages = document.getElementById("thumbnails").getElementsByTagName("img"),
        j = 0;  

    var startTimer = function(){
        stillTimer = setInterval(function(){
                j = (j &lt; 3) ? ++j : 0 ;
                mainImage.src = thumbnailImages[j].src;

            }, 10000);
    }   

    startTimer();

    for(i = 0 ; i &lt; thumbnailImages.length ; i++){
        thumbnailImages[i].addEventListener("click", function(evt){     
            clearInterval(stillTimer);
            mainImage.src = evt.target.src;                 
            ++j; 
            startTimer();
        });
    };
}


CSS:

body {  
    margin: auto;
    width: 800px;
    height: 800px;
}

#mainContainer {    
    width: 760px;
    height: 800px;
}

#mainImage {
    margin: auto;      
    height: 560px;  
}

#mainImage img {
    margin: 10px;  
    width: 740px;
    height: 540px; 
}

#thumbnails {
    padding-top: 10px;
    height: 205px;
}

.imgThumbnails {
    margin-left: 6px;
    height: 186px;
    width: 180px;
    display: inline;
    hover: 
}

.imgThumbnails:hover {
    cursor: pointer;
}
I'm not a JS guy, so I focus on your HTML and CSS.

HTML


You're using the HTML5 doctype, so you can safely ommit the type-attribute on the script-tag
Add the viewport meta tag to the head-area to ensure correct viewport behavior on mobile devices:&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;(Note: I left out the self-closing / for the meta tag as well)
Avoid using ID's excessively; Things like caption and even a gallery itself are likely to occur multiple times on the same page &ndash; Classes are more appropriate there


CSS:


You have an error in the .imgThumbnails -rule, where you use a hover-property; There is no such property!
Side note: There is also no semi-colon. Although one can ommit the last semi-colon in a list of property-declarations, I highly encourage anyone not to do this. It just leads to unnecessary trouble
You're using a lot of fixed widths and heights. This is very restrictive and should be avoided.


Before I get deeper in to making suggestions on how to improve your code further, it would be great to have some kind of demo. This doesn't need to be a working example of your gallery, you can use placeholders instead of images.