Javascript Banner Rotator for Home Page

Last modified by constructaid on Thu, November 11, 2010 21:31
Source|Old Revisions  

This is an old revision of the document!


Here is some simple code that you can modify to add a Javascript Banner Rotator to your home page. The code below is rotating three different .jpg banners, each with Alt text and hyperlinks. The code can be modified to add more images, links and alt text for the images. If you want to add more than 3 images, note each place that calls an interval of 3 and change it to the number of images/links you have. You will also notice that my banner images are set to a 900 pixel width and 250 pixel height... simply change yours to meet your size requirements. You can slow down or speed up the image rotation by changing the window.setInterval. Increase 4000 to slow it down, and decrease to speed it up (i.e. 10000 is very slow, whereas 1000 is super fast.)

Simply modify the code to fit your requirements and paste into a CMS Block as is. I pasted this code into my Home Page CMS and it simply worked the first time. Just hardcode the links to your images and urls and you should be fine.

Enjoy!

<script type=”text/javascript”> var imgs1 = new Array(”http://www.YourURL.com/store/skin/frontend/YourTheme/YourTheme/images/banners/TheNameofYourImage_1.jpg“,”http://www.YourURL.com/store/skin/frontend/YourTheme/YourTheme/images/banners/TheNameofYourImage_2.jpg“,”http://www.YourURL.com/store/skin/frontend/YourTheme/YourTheme/images/banners/TheNameofYourImage_3.jpg“); var lnks1 = new Array(”http://www.YourFirstURL.com/“,”http://www.YourSecondURL.com/“,”http://www.YourThirdURL.com/“); var alt1 = new Array(”Alt Text for Image 1”,”Alt Text for Image 2”,”Alt Text for Image 3”); var currentAd1 = 0; var imgCt1 = 3; function cycle1() {

if (currentAd1 == imgCt1) {
  currentAd1 = 0;
}

var banner1 = document.getElementById(’adBanner1’); var link1 = document.getElementById(’adLink1’);

banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById('adLink1').href=lnks1[currentAd1]
currentAd1++;

}

window.setInterval("cycle1()",4000);

</script>

<a href=”“http://www.YourFirstURL.com/“” id=”adLink1” target=”_top”> <img src=”http://www.YourURL.com/store/skin/frontend/YourTheme/YourTheme/images/banners/TheNameofYourImage_1.jpg” id=”adBanner1” border=”0” width=”900” height=”250”></a>




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs