$(document).ready(function() {
    var roll = $("#rolllist li");
    var Num = roll.length;
    var i = 0;
    var imgArray = $("#rolllist").parent("div").siblings().find("img");
   
    setInterval(function() {

        roll.eq(i).hide("slow");
        roll.eq(i + 1).show("slow");

        var arrSrc = imgArray[i].src.substring(imgArray[i].src.lastIndexOf("/") + 1).split(".");
        imgArray[i].src = "images/" + arrSrc[0] + "_back." + arrSrc[1];
        
        if (i >= 1) {
            imgArray[i - 1].src = imgArray[i - 1].src.replace("_back", "");
        }
        else {
            imgArray[imgArray.length - 1].src = imgArray[imgArray.length - 1].src.replace("_back", "");
        }

        i++;
        if (i >= Num) {
            i = 0;
            roll.eq(i).show("slow");
        }

    }, 2000);

});