showroom

by thcipriani

HTML

<ul class="rotator">
    <li>uno</li>
    <li>dos</li>
    <li>tres</li>
    <li>quatro</li>
    <li>cinco</li>
</ul>

CSS

._1{
     color:red;   
}
._2{
     color:green;   
}
._3{
     color:blue;   
}
._4{
     color:purple;   
}
._5{
     color:pink;   
}

JavaScript

$("ul.rotator > li").each(function(index) {
    var theNumber = index+1;
    $(this).addClass("_"+theNumber);
  });

var arr = ["_1","_2","_3","_4","_5"];

$("ul.rotator > li").click(function(){
        var thisThingsClass = $(this).attr('class');
        var numberOThings = $("ul.rotator > li").length;
        var indexNum = $.inArray(thisThingsClass, arr);
        var notherIndex = $(this).index();
            if (indexNum != 2){
                $("ul.rotator > li").removeClass();
                $(this).addClass(arr[2]);
                var thisis = $("ul.rotator > li").index($(this)) + 1;
                alert(thisis);
                var n = 3;
                for (var i=thisis; i<numberOThings; i++)
                {
                    $("ul.rotator > li").eq(i).addClass(arr[n]);
                    n++
                }
                for (var i=thisis; i>-1; i--)
                {
                     $("ul.rotator > li").eq(i).addClass(arr[n]);
                      n--  
                }
            }
        //alert(numberOThings);
    });