JSFiddle - React, Tailwind, and code Playground

by ajibanda

HTML

<div id="pagiImg">
    <a id="rotatingHref" href="http://inkperweek.tumblr.com/post/34071658607/traxex-the-drow-ranger-by-aj-banda" target="_blank">
        <img id="rotatingImg" src="http://24.media.tumblr.com/tumblr_mc9tpsX8Up1rfygheo1_250.jpg" />
    </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:400px;
    color:#ffffff;
    text-align:center;
}
#pagi a{color:#ffffff;text-decoration:none;font-weight:bold;}
#pagiImg{border:1px solid steelblue;width:398px;height:600px;}
#pagiImg img{width:398px;height:600px;}

JavaScript

$(document).ready(function() {
    // 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://inkperweek.tumblr.com/post/34071658607/traxex-the-drow-ranger-by-aj-banda", "http://inkperweek.tumblr.com/post/35025838536/week-9-vampire-vampira-by-aj-banda", "http://inkperweek.tumblr.com/post/35025918118/week-10-cemetery-finish-line-by-aj-banda"];

    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"));
    }
});