JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<div class="switch">OverActivate</div>
<img src="http://www.carscovers.co.uk/images/P/vw%20passat%20cc%20car%20cover.jpg" class="cycle1">
<img src="http://www.carscovers.co.uk/images/P/megane%20cc%202008-%20car%20covers.jpg" class="cycle1">
<img src="http://rentacar-s.com/scripts/images/prodpict1_44.png" class="cycle1">
<img src="http://www.tjdmodels.com/bmz_cache/f/f14e5710145c9314cc1ce3d0f71580db.image.200x200.jpg" class="cycle1">
<img src="http://en-img-dis.gcimg.net/home/web/product/day_20100822/s_db31554617854b7e3cc53976e47656b3.jpg" class="cycle2">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQcfKg2toZMvlmv8lU5NlC_dedECQAyiqIKn10KxU8M2nVOn18c" class="cycle2">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRZodicu61W1ukI8le_Ge849IX_oze-3Bsn1Y3wOvYrShZNiMk0Ow" class="cycle2">
<img src="http://static1.fatwalletcdn.com/static/i/deals/double-manufacturers-rebates-up-to-160-in-rebates-on-select-tires-and-wheels-3cnd3uq7dksg8cc08w80cwoo4.jpg" class="cycle2">
<hr>
<div class="switch2">OverDrive</div>
<img src="http://cyclehappy.com/90-388-large/prodeco-phantom-x-36v-folding-electric-bike.jpg" class="cycle3">
<img src="http://www.triradar.com/files/2013/01/BMC-TMR01-Ultegra-DI2-Super-Bike.jpg" class="cycle3">
<img src="http://www.fortebikes.com/wp-content/uploads/GMC-Denali-Road-Bike.jpg" class="cycle3">
<img src="http://i.ebayimg.com/t/WACHSEN-Bicycle-WACHSEN-Angriff-BA-100-BRD-6-speed-folding-bike-20-inches-Japan-/00/s/NTAwWDUwMA==/z/0tsAAMXQ4uJR8Y-5/$T2eC16J,!)UE9s3wBn,0BR8Y-41KMQ~~60_35.JPG" class="cycle3">

CSS

.switch, .switch2 {
    display:block;
    padding:10px;
    color:#fff;
    background:#888;
}
.switch:hover, .switch2:hover {
    cursor:pointer;
    color:#8f8;
    background:#080;
}
.cycle1, .cycle2, .cycle3 {
    border:1px solid #999;
    max-width:200px;
    max-height:200px;
    margin:20px;
}

JavaScript

function mh2($id, $trigger, $speed) {
    var id = $($id),  l = id.length,  i = 0;
    id.css({
        'display': 'none'
    });
    $($id + ':eq(0)').css({
        'display': 'inline'
    });

    var int;

    function player() {
        int = setInterval(function () {
            id.eq(i % l);
            i++;
            id.hide().eq(i % l).show();
        }, $speed);
    }

    $($trigger).mouseenter(function () {
        clearInterval(int);
        player();
    }).mouseleave(function () {
        clearInterval(int);
    });
}

mh2('.cycle1', '.switch', 700);
mh2('.cycle2', '.switch', 500);
mh2('.cycle3', '.switch2', 300);