Swop inline images on page refresh

by freedawirl

HTML

<!--We appendin' on this div - ps: ids make sense here... punk-->
<main id="maincontent">
<heroimghtml>
  <img src="/uploadedImages/New2016/Riders_Guide/Service Changes.jpg" class="hero">
</heroimghtml>
</main>

CSS

img.hero {
    display: block;
    width: 100%;
    height: auto;
}
.fade-in{
  -webkit-animation: fade-in 2s ease;
  -moz-animation: fade-in ease-in-out 2s both;
  -ms-animation: fade-in ease-in-out 2s both;
  -o-animation: fade-in ease-in-out 2s both;
  animation: fade-in 2s ease;
  visibility: visible;
  -webkit-backface-visibility: hidden;
}

@-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}}
@-moz-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@-o-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@keyframes fade-in{0%{opacity:0} 100%{opacity:1}}

JavaScript

$(function(){
//New images on load
//Add your images, we'll set the path in the next step
    var images = ['express1.jpg', 'express2.jpg', 'express3.jpg', 'express4.jpg','express5.jpg'];
    
//Build the img, then do a bit of maths to randomize load and append to a div. Add a touch off css to fade them badboys in all sexy like.
    $('<img class="fade-in" src="http://capmetro.org/ImageSwaps/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#maincontent > heroimghtml');
    });