Add a image silder that change on page refresh

<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>
Advertisements

Tagged: ,

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

  1. 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.

%d bloggers like this: