simple slider help

simple slider help

Hi there,

I am new to jQuery and I am trying to do my first jquery code and it will basically be a simple slider.

      -The slider will show 3 images(300px each) at a time which will be 50% transparent.

      -on clicking "next button" the the panel div which contains 9 images will move left 300px

      -while moving the image on the center will change its opacity to 1


I have come up with some sort of pseudo code of how I would do it and I was wondering if someone would be able to check it and tell me if it would work(with correct syntax)


<div id="wrapper" style="overflow:hidden; width:900px>

      <div id="panel" style="position:relative;opacity:50%; display:inline>

            <img1><img2><img3><img4><img5><img6><img7><img8><img9>

      </div>

</div>

<a id="next">NEXT</a>

<script>
var n=0
var max=9

on clicking "#next"{
    call function animate()
    call function fader()
}

/* functions */   
    function animate(){
    #panel.animate - "left", "300px"
        if (n=max){n=0}
        else if{n+1}
    }
   
    function fader(){
        var fade=n+1 /*value of n*/
       
        fade.removeClass - .opacity /*remove opacity*/
       
    }
</script>