Simple image slider

by Nick Hulea

HTML

<div class="wrapper">
    <div id="slider">
        <img id="1" alt="start" src="http://www.gravatar.com/avatar/9421296be4497530b07832bf5e6366dd?s=80&d=https%3A%2F%2Fimg.zohostatic.com%2Fdiscussions%2Fv1%2Fimages%2FdefaultPhoto.png">
        <img id="2" alt="1" src="http://discuss.zoho.com/getCustomFile.do?fileId=14737000003002247&forumGroupId=14737000000003003">
        <img id="3" alt="2" src="http://discuss.zoho.com/getCustomFile.do?fileId=14737000003672243&forumGroupId=14737000000003003">
    </div>
</div>
<div id="nav">
    <a href="#left" class="left">previous</a>
    <a href="#right" class="right">next</a>
</div>

CSS

#wrapper {
    position:relative;
}
#slider {
    height:200px;
}
#slider img {
    width:200px;
    height:200px;
    display:none;
    top:0;
    position:absolute;
}
#nav {
    background:beige;
    width:200;
    text-align:center;
}

JavaScript

$(function () {
    var count = $("#slider > img").length
    var slider = 1
    var speed=5000
    var fadeSpeed = 300
    var loop 
    start()
    $("#1").fadeIn(fadeSpeed);
    $('.right').click(right)
    $('.left').click(left)
    $('#slider').hover(stop,start)
    
    function start(){
        loop = setInterval(next, speed)
    }
    function stop(){
        clearInterval(loop)
    }
    function right() {
        stop()
        next()
        start()
        return false
    }

    function left() {
        stop()
        prev()
        start()
        return false
    }

    function prev() {
        slider--
        if (slider < 1) {
            slider = count
        }

        $("#slider > img").fadeOut(fadeSpeed)
        $("#" + slider).fadeIn(fadeSpeed)
    }

    function next() {
        slider++
        if (slider > count) {
            slider = 1
        }

        $("#slider > img").fadeOut(fadeSpeed)
        $("#" + slider).fadeIn(fadeSpeed)
    }
});