JSFiddle - React, Tailwind, and code Playground

by chepe263

HTML

<ul>
    <li class="thumb0"></li>
    <li class="thumb1"></li>
    <li class="thumb2"></li>
    <li class="thumb3"></li>
    <li class="thumb4"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<!--img src="http://i.stack.imgur.com/8FjvI.jpg" /-->

CSS

ul         {padding: 0px; width: 640px;}
ul li      {display: none; x:inline-block; width: 246px; height: 134px; margin: 0px 5px 5px 0px; 
            border: 1px solid #000; cursor: pointer;
    background-image: url(http://i.stack.imgur.com/8FjvI.jpg);
    background-repeat: no-repeat;
    opacity: 0.5;
    xbackground-position: -9px -79px;

}
ul li:first-child{
    display: inline-block;
    
}
ul li:hover{
    opacity:1;
}
.thumb0{
    background-position: -9px -79px;
    
}

JavaScript

alto = 134;
ancho = 246;
x= -9;
y= -79;
i=-1;
for (mx=0; mx < 4; mx++){    
    for (my=0; my < 4; my++){
        i++;
        jQuery('ul li').eq(i).css('background-position-x','-' + ((my * ancho) + 25) + 'px');
        jQuery('ul li').eq(i).css('background-position-y','-' + ((mx * alto) + y*-1)   + 'px');        
    }
}
clok = 0;
ani = function(){
clearTimeout(clok);
    d= jQuery('ul li:visible').next();
    if (d.length !=0){
        jQuery('ul li:visible').hide();
        jQuery(d).show();
    } else {
        jQuery('ul li').hide();
        jQuery('ul li:first-child').show();
    }
    setTimeout(function(){ani()},700);
}
ani();
/*jQuery('ul:eq(0)').click(function(){
    d= jQuery('ul li:visible').next();
    jQuery('ul li:visible').hide();
    jQuery(d).show();
    console.log(d);

});
*/