JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<div class="imageRotation">
<img width="48" height="48" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuOUA8sMsAAAOhSURBVFhH7ZlLTxNRGIY7lBjF8k+8xK0gSiulrbWtvRcLWAZKLZfW2lIulRJBEVS8B6PxGl2p0cSFMcYfYVy4ExduxZlzzkxboNTvMEiMMU6mkJbFNF+aSS+TJ+93mXPewxxsLmnKfEl/LDEMhKaGKdXUlLTakra2VKst7dihgdi5E4Kp26Wpq2N272Z0dYyuntHBhU5Tr4NPNPDVwsIni/mAhMCyEQ0AKY/Vg81FiAb9yqGjS4eNBb0p32LNme2izS26AkKgUwiFhciAEE+Jo+O5yen81RuF+ftLT58vv3q98u598cXLbyw79m8dyqMBlEYDRTGYc63HRauTnPARbxAHuzAbwdFBfGaIjI6T8xeF2Tnx9nz+wePC/L3vieQz+WQoB5KEKRxpBVUoiiuAA53oVA/q7UODZ1FqBGUm8NQlcuWaMD3zLRx5Ig/x5y8UAkGyqDZHWnNGq3Dchb1BihIZQPEUGs6g7CQay37tOPVIGcQmgECe5cMt+ZZjQEP87TRB8SSJJxe8gcflQ5QLRGsZ5Gk25Ux2wRUgLv+XPfu6t4Zj4y5KUkbzBW0FhWx1Ct6gsMUo0u2UA9HO2k5AhiW9CUaO4PSTvfuHNkTat99y/dbnDx+XNyubQoWKjXoYP7SorU7sacOd3bj/DBnN0iZ/+ER88zZfSSCY6cUGWkaF5lbRaCXA5A7gDhZHY9DtaO4mfvp804WlRCEAoo0GnU8HozF31CJAuzm85GQI98XpELpzl1RYod9Ma+OxiUqVN1pFu4d0sCiR5mfnUOWB1pmk9DUaluGJZrLBFOD7YtzkNFcVIGmBAOmjGTxkWILcOX18uG9xYupnFYEkLNp3BjNxeLju0z+yk4sq0N8LOlUhuUGlKqQqVM426M+dk1pDag2pNSTz9JUrEVkrQu0yOQlVhVSF1DlU0Tk0fn577Dr0ZsHu4djIYmZie+zL9CbB5uZD4cXhTDV3rusbxQY9mHxgx6L2Li4xxFd/owhmCDghZjs4snxvf/WBVsFyaKK+LLF7+GCo+ilbc0INcLogWhzY3QaVxA8k0Mg5PDGFLszw05fl49IVbuYqDbhQZHr+cymy5hVLPp9VsLmwL4hCYRSN4ViSP5vmksNcckQm0mMcdEM6w6VGtgCI+jLSKQz413DuYXMT70kSDOHOHkrW1QvB/z96omDl8PDORvjNK7Th8600USYw1HIWB2DBZKJuHwScy/w/XH7iboMzE+L0kV9MvjjL4V4eVQAAAABJRU5ErkJggg==" />
<img width="48" height="48" title="" alt=""...

CSS

.imageRotation{
position:relative;top:0;left:0;
}
.imageRotation img{
    position:absolute;
    top:0;
    left:0;
}

JavaScript

var ImageRotate = new Class({
    Implements:[Options,Events],
    options:{
        delay:2000,
        minorZIndex:0,
        majorZIndex:1
    },
    initialize:function(options,element){
        
        this.setOptions(options);
        
        if(element){
            this.element = element;
        }else{
            //todo
        }
        var imgs = this.element.getElements('img');
        var arrimgs = [];
        imgs.each(function(img){arrimgs.push(img);});
        this.allimgs = imgs;
        this.images = arrimgs;    
        this.setNextImg();   
                
    },
    setNextImg: function(){
        this.allimgs.setStyle('z-index',this.options.minorZIndex);
        var nextImg = this.images.shift();
        nextImg.setStyle('z-index', this.options.majorZIndex);
        this.images.push(nextImg);
        this.setNextImg.bind(this).delay(this.options.delay);
    }
})

            var test = new ImageRotate({}, $$('.imageRotation')[0])