JSFiddle - React, Tailwind, and code Playground
HTML
<div style="max-height:100px;background-color:#1E2B3B;text-align:right;width:100%;" class="random-img"><img></div>
JavaScript
images = [
{
'url': 'www.tautic.com/',
'img': 'http://libertytalk.fm/imagerotator/test-image-001.jpg',
'ttl': 'Tautic',
'alt': 'Tautic'
},
{
'url': 'www.designspark.com/',
'img': '2.jpg',
'wth':'472',
'hgt':'100',
'ttl':'Design Spark',
'alt':'Design Spark'
},
{
'url': 'www.involutionstudios.net/',
'img': '3.jpg',
'wth': '472',
'hgt': '100',
'ttl': 'Involution Studios - Web Design',
'alt': 'Involution Studios - Web Design'
},
{
'url': 'www.explorestem.co.uk/',
'img': '4.jpg',
'wth': '472',
'hgt': '100',
'ttl': 'Explore Stem',
'alt': 'Explore Stem'
}
];
imgLoop = function() {
var img = images[Math.floor(Math.random() * images.length)];
var el = '<a href="http://'+img.url+'" title="'+img.ttl+'" target="_blank">';
el += '<img src="'+img.img+'" alt="'+img.alt+'" /></a>';
$('.random-img img').fadeOut(400, function() {
$(this).remove();
$(el).appendTo('.random-img').hide().fadeIn();
});
};
imgLoop();
setInterval(imgLoop, 3000);