JSFiddle - React, Tailwind, and code Playground

by BlaXpirit

HTML

<ul id="main_rotator" class="rotator">
    <li><a href="#1"><img src="http://jeopardygirl.files.wordpress.com/2007/04/happy-face-happyface-smiley-300x300.gif"/></a></li>
    <li><a href="#2"><img src="http://www.clker.com/cliparts/M/v/0/d/y/3/surprised-smiley-face-md.png"/></a></li>
    <li><a href="#3"><img src="http://www.clker.com/cliparts/Y/I/k/n/S/d/smiley-face-md.png"/></a></li>
</ul>

CSS

#main_rotator {
    display: inline-block;
    width: 300px;
    height: 300px;
    border: 1px solid black;
}

.rotator {
    position: relative;
}
ul.rotator {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul.rotator li {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.rotator_buttons {
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 20px;
}

.rotator_button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid black;
    display: inline-block;
    background-color: #888;
    margin: 5px;
}
.rotator_button.selected {
    background-color: #fff;
}

JavaScript

$('.rotator').each(function(){
    var $this = $(this)
    var $buttons
    var $children = $this.children('li')
    var current = -1
    var count = $children.length
    var animating = false
    var timer
    var r_start = function() {
        var old = animating
        animating = true
        t_stop()
        return !old
    }
    var r_stop = function() {
        animating = false
        t_reset(5000)
    }
    var rotate_to = function(i) {
        var t = 400
        if(i==current) {
            t = 0
        } else if(r_start()) {
            $children.eq(current).fadeOut(t)
            $children.eq(i).fadeIn(t, r_stop)
            $buttons.eq(current).removeClass('selected', t)
            $buttons.eq(i).addClass('selected', t)
            current = i
        }
    }
    var rotate_next = function() {
        i = current+1
        if(i>=count)
            i = 0
        rotate_to(i)
    }
    var t_stop = function() {
        window.clearTimeout(timer)
    }
    var t_reset = function(t) {
        t_stop()
        timer = setTimeout(rotate_next, t)
    }
    $children.hide()
    $this.append('<div class="rotator_buttons"></div>')
    $buttons = $this.children('.rotator_buttons')
    $this.children('li').each(function(){
        $buttons.append('<span class="rotator_button"></span>')
    })
    $buttons = $buttons.children('.rotator_button')
    $buttons.each(function(i){
        $(this).click(function(){
            rotate_to(i)
        })
    })
    rotate_to(0)
    $this.mouseenter(t_stop)
    $this.mouseleave(t_reset)
})