Slideshow divs javascript

Question

I have some divs into another one which has id="container". What I want is the page to start with first div from container then clicking on a next button to clear the div and show second div from container.

My code:

$(document).ready( function() 
{ 
   $("#container div").not("#container div:first").each(function(){

    $(this).addClass('hidden');

});

$("next").click(function(){
    var divWithoutHiddenClass=$("#container div").not("#container div.hidden");       

   divWithoutHiddenClass.addClass('hidden');

       if(divWithoutHiddenClass.next().html()===undefined){
           $("#container div:first").removeClass('hidden');
    }
    else{
        divWithoutHiddenClass.next().removeClass('hidden');
    }
});
});   

and:

<div id="container" class="thirdcanvas">

       <div id="vapor">
           <img src="images/alfabet/w.png" alt=""/>
           <img src="images/alfabet/f.png" alt=""/>
           <img src="images/alfabet/v.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/o.png" alt=""/>
           <img src="images/alfabet/r.png" alt=""/>
       </div>

       <div id="baiat">
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/aa.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/t.png" alt=""/>
       </div>     

       <div id="colac">    
           <img src="images/alfabet/g.png" alt=""/>
           <img src="images/alfabet/c.png" alt=""/>
           <img src="images/alfabet/u.png" alt=""/>
           <img src="images/alfabet/o.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/c.png" alt=""/>
       </div> 

       <div id="slapi">    
           <img src="images/alfabet/s.png" alt=""/>
           <img src="images/alfabet/ss.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
       </div>  

       <div id="umbrela">   
           <img src="images/alfabet/u.png" alt=""/>
           <img src="images/alfabet/n.png" alt=""/>
           <img src="images/alfabet/m.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/r.png" alt=""/>
           <img src="images/alfabet/e.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
       </div>  
   </div>

<a href="#" onClick="nextImage()"><img id="next" src="images/nextBtn.png" title="Continuare" /></a> 

Answer 1

everytihng looks fine except of click exent change $('next') to $('#next') remove onclick arrgument on a tag and add there id="next". If you don't want browser window to move on click you can also use prevent default on a click http://api.jquery.com/event.preventdefault/

more info if you will add jsfiddle :)

EDIT: because you added jsfiddle I am giving the answer. http://jsfiddle.net/rQb5e/16/

Answer 2

In this line $("next").click(function(){ you missed the sharp ("#") before the img's id. Also, i'm not sure that this is your all JS - code, but you wil see error that function "nextImage()" isn't defined.

I offer you to use jQuery function for show() and hide() instead of classes. I change your js code and worked is:

$(document).ready( function() { 
           $("#container div").not(":first").each(function(){
            $(this).hide();
        });

        $("#next").click(function(){
            var divWithoutHiddenClass=$("#container div").not(":hidden"); 
            divWithoutHiddenClass.hide();
            if (divWithoutHiddenClass.next().html() === undefined){
                $("#container div:first").show();
            }
            else{
                divWithoutHiddenClass.next().show();
            }
        });
    });   

EDIT: Example in Fiddle: http://jsfiddle.net/8Erxa/

Answer 3

I made an example on jsbin, hope this helps. Don't know what you mean with "clear" in my example it randoms, when the last<div>is reached, it starts over with the first.