JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<input type="button" value="test"/>
<div class="hide1">
    <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/001.jpg" class="pmsbanner_img1 hide1" alt="" title=""> 
    
    <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/002.jpg" class="pmsbanner_img1-1 hide1" style="" alt="" title="">
    
     <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/003.jpg" class="pmsbanner_img1-2 hide1" style="" alt="" title=""> 
    
    <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/004.jpg" class="pmsbanner_img1-3 hide1" style="" alt="" title=""> 
    
    <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/005.jpg" class="pmsbanner_img1-4 hide1" style="" alt="" title="">
</div>

CSS

img{ display: none;}

JavaScript

$('input[type=button]').click(function (){
    BannerLoad(1, 5, 0);
})
function BannerLoad(bannerID, maxImageIndex, i) { 
    var selector = (i==0) ? $('.pmsbanner_img' + bannerID) : $('.pmsbanner_img' + bannerID + '-' + i);       
    selector.fadeIn(200, function() {
        if(i < maxImageIndex - 1) {
            //alert("BannerLoad("+bannerID+","+ maxImageIndex+","+ i+")");
            BannerLoad(bannerID, maxImageIndex, ++i);
        } else {
            $(".hide" + bannerID).delay(500).fadeOut(7000);
        }
    });       
}