image slider (manual)

by ajibanda

HTML

<div id="pagiImg">
    <a id="rotatingHref" href="1.html" target="_blank">
        <img id="rotatingImg" src="http://24.media.tumblr.com/tumblr_mc9tpsX8Up1rfygheo1_250.jpg" alt="http://24.media.tumblr.com/tumblr_mc9tpsX8Up1rfygheo1_250.jpg" title="http://24.media.tumblr.com/tumblr_mc9tpsX8Up1rfygheo1_250.jpghttp:" />
    </a>
</div>

<div id="pagi">
    <a href="#" id="prevBtn"> &lt; </a> 
        &middot; 
    <a href="#" id="nextBtn"> &gt; </a>
</div>

CSS

#pagi{
    text-decoration:none;
    font-weight:bold;
    background-color:steelblue;
    width:200px;
    color:#ffffff;
    text-align:center;
}
#pagi a{color:#ffffff;text-decoration:none;font-weight:bold;}
#pagiImg{border:1px solid steelblue;width:198px;height:400px;}
#pagiImg img{width:198px;height:400px;}

JavaScript

// place all image links here
    arrayOfImg = ["http://24.media.tumblr.com/tumblr_mc9tpsX8Up1rfygheo1_250.jpg", "http://25.media.tumblr.com/tumblr_mczqxjE6yL1rfygheo1_250.jpg", "http://24.media.tumblr.com/tumblr_mczqzbiHSg1rfygheo1_250.jpg"];
    // place all links here
    arrayOfHref = ["http://www.ajibanda.com", "http://www.ajibanda.com", "http://www.ajibanda.com"];

    ctr = 0;
    $("#prevBtn").click(function() {
        prevPage();
    });
    $("#nextBtn").click(function() {
        nextPage();
    });

    function nextPage() {
        ctr++;
        if (ctr > arrayOfImg.length - 1) ctr = 0;
        console.log(ctr);
        $("#rotatingHref").attr("href", arrayOfHref[ctr]);
        $("#rotatingImg").fadeOut(400, function() {
            $("#rotatingImg").attr("src", arrayOfImg[ctr])
        }).fadeIn(400);

        console.log($("#rotatingHref").attr("src"));
    }

    function prevPage() {
        ctr--;
        if (ctr < 0) ctr = arrayOfImg.length - 1;
        console.log(ctr);
        $("#rotatingHref").attr("href", arrayOfHref[ctr]);
        $("#rotatingImg").fadeOut(400, function() {
            $("#rotatingImg").attr("src", arrayOfImg[ctr])
        }).fadeIn(400);

        console.log($("#rotatingHref").attr("src"));
    }