Add a image silder that change on page refresh

Magento December 30, 2009 Comments: 2

<div class="image_add" align="right">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var randomTWD = 0;
var DoIt = 0;
images = new Array;
images[1] = new Image();
images[1].src = "your image";
images[2] = new Image();
images[2].src = "your image";
function TWDpics() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
randomTWD = Math.round((imgnum - 1) * randnum) + 1;
} while (randomTWD == DoIt);
DoIt = randomTWD;
document.ImageHolder.src = images[DoIt].src;
}
// End -->
</script>
<body onLoad="TWDpics();">
<a  href="your domin"><img  width="320px" height="63px"name="ImageHolder" src="your image" border="0" alt="Change image on load"></a>
</div>

Tagged: image, Magento

2 thoughts on “Add a image silder that change on page refresh”

midpart December 30, 2009 at 4:17 pm


<script type="text/javascript">
var ShowRandomTextBlock = function()
{
  var blocks = new Array();
  function DoIt()
  {
    var d = document.getElementById('highlights').getElementsByTagName('div');
    for (var x=0, y=d.length; x < y; x++) {
      // capture the divs with the right class name
	 // alert(d.length);
      if (d[x].className == 'textspot') { blocks.push(d[x]); }
    }
    // find random number
    var spot = Math.floor((Math.random() * blocks.length)%d.length);
    // Set whether each div block should be seen or not
    for (var x=0, y=blocks.length; x < y; x++) {
      if (spot == x) { blocks[x].style.display = ''; }
      else { blocks[x].style.display = 'none'; }
    }
  }
  window.onload = DoIt;
}();
</script> 
<div id="highlights" >
  <div class="textspot" style="display:none">text1
<a href="#">  <img src="{{skin url='images/images/Banner-1.jpg'}}" alt="image1"  width="510px"  border="0"/></a>
  </div>
 
  <div class="textspot" style="display:none">text2
  <a href="#">  <img src="{{skin url='images/images/Banner-2.jpg'}}" alt="image2"   width="510px"  border="0"/></a>
  </div>
  <div class="textspot" style="display:none">text3
  <a href="#">  <img src="{{skin url='images/images/Banner-3.jpg'}}" alt="image3"   width="510px"  border="0"/></a>
  </div>
  <div class="textspot" style="display:none">text4
  <a href="#">  <img src="{{skin url='images/images/Banner-4.jpg'}}" alt="image4"   width="510px"  border="0"/></a>
  </div>
  <div class="textspot" style="display:none">text5
  <a href="#">  <img src="{{skin url='images/images/Banner-5.jpg'}}" alt="image5"   width="510px"  border="0"/></a>
  </div>
  <noscript>Text for people with JavaScript disabled.</noscript>
</div>

Even this is good

Suresh April 17, 2010 at 11:37 pm

Hey I’m new to this.. for the original posted code, how do you get the images to play in a particular order?

Comments are closed.