Rotation of images using javascript

Question

nikita.chandra 0 Junior Poster in Training

14 Years Ago

Hi....
i am creating a website and on home page i want to rotate different images randomly,by the code given below i am able to rotate image at one place but i want to rotate image at more than one different places with different images. like this

[1] [1] [1]

[2] [2] [2]

[1] and [2] are the places for image

Please help....

<SCRIPT LANGUAGE="JavaScript">
<!--

var dimages=new Array();
var numImages=11;

for (i=0; i<numImages; i++)
{
  dimages[i]=new Image();
  
  dimages[i].src="images/image"+(i+1)+".jpg";
  

}
var curImage=-1;


function swapPicture()
{
  if (document.images)
  {
    var nextImage=curImage+1;
    if (nextImage>=numImages)
      nextImage=0;
    if (dimages[nextImage] && dimages[nextImage].complete)
    {
      var target=0;
      if (document.images.myImage)
        target=document.images.myImage;
      if (document.all && document.getElementById("myImage"))
        target=document.getElementById("myImage");

      // make sure target is valid.  It might not be valid
      //   if the page has not finished loading
      if (target)
      {
        target.src=dimages[nextImage].src;
        curImage=nextImage;
      }

      setTimeout("swapPicture()", 2000);

    }
    else
    {
      setTimeout("swapPicture()", 500);
    }
  
  }

  
   
  }

//setTimeout("swapPicture1()",1000);
setTimeout("swapPicture()", 2000);

//-->
</SCRIPT>

javascript

2 Contributors
5 Replies
217 Views
5 Days Discussion Span
Latest Post 14 Years Ago Latest Post by Taywin

Taywin 312 Posting Virtuoso

14 Years Ago

You can just use random() function to get 2 images you want to swap. Then perform the swap between those two. You already have numImages variable, so you could random it off from that in your dimages[] array.

var firstIndex = Math.floor(Math.random()*numImages)
var secondIndex = Math.floor(Math.random()*numImages)
// caution: the while loop below will attempt to search for a different
//          image index. If you have only 1 image, it will become an
//          infinite loop!
while (firstIndex==secondIndex) {
  secondIndex = Math.floor(Math.random()*numImages)
}
// then do the swap after you get both first & second indices.
// one image is dimages[firstIndex] and the other is dimages[secondIndex]

Edited 14 Years Ago by Taywin because: n/a

Taywin 312 Posting Virtuoso

14 Years Ago

Hmm... Your explanation confused me even more... What is 'rotation' in your meaning? Here are my definitions.

1.Rotation image means all display images are being rotated around.

original display
[1] [2] [3]
[4] [5] [6]

first rotation
[2] [3] [4]
[5] [6] [1]

second rotation
[3] [4] [5]
[6] [1] [2]

and so on...

2.Randomly swap 2 among themselves each time.

original display
[1] [2] [3]
[4] [5] [6]

first rotation : let say random1 is imageLocation3 and random2 is imageLocation1
[3] [2] [1]
[4] [5] [6]

second rotation : let say random1 is imageLocation4 and random2 is imageLocation3
[3] [2] [4]
[1] [5] [6]

and so on...

3.Rotate an image from sources that are not being displayed. Those 11~16 images are not being displayed in the first place but are replace the 1~6. And then images 1~6 are swapped back to replace 11~16 again.

original display
[1] [2] [3]
[4] [5] [6]

first rotation
[11] [12] [13]
[14] [15] [16]

second rotation
[1] [2] [3]
[4] [5] [6]

and so on...

The code below shows the first definition only even though it also has the 2nd definition implemented (but no 3rd definition).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<script type="text/javascript">
  var dimages=new Array();
  var numImages=11;

  function swapPicture1(imgDivId) {
    var imgDiv = document.getElementById(imgDivId)
    if (imgDiv) {
      var allImgs = imgDiv.getElementsByTagName("img")
      var tmpSrc = allImgs[0].src
      for (var i=0; i<allImgs.length-1; i++) {
        allImgs[i].src = allImgs[i+1].src
      }
      allImgs[allImgs.length-1].src = tmpSrc
      window.setTimeout("swapPicture1('"+imgDivId+"')", 2000)
    }
  }

  function swapPicture2(imgDivId) {
    var imgDiv = document.getElementById(imgDivId)
    if (imgDiv) {
      var allImgs = imgDiv.getElementsByTagName("img")
      if (allImgs.length>1) {
        var firstIndex = Math.floor(Math.random()*allImgs.length)
        var secondIndex = Math.floor(Math.random()*allImgs.length)
        var tmpSrc = allImgs[firstIndex].src
        while (firstIndex==secondIndex) {
          secondIndex = Math.floor(Math.random()*allImgs.length)
        }
        allImgs[firstIndex].src = allImgs[secondIndex].src
        allImgs[secondIndex].src = tmpSrc
      }
      window.setTimeout("swapPicture2('"+imgDivId+"')", 2000)
    }
  }
</script>
</head>

<body>
<div id="myImgs" name="myImgs">
<img src="images/image1.jpg" id="myImg1" name="myImg1">
<br />
<img src="images/image2.jpg" id="myImg2" name="myImg2">
<br />
<img src="images/image3.jpg" id="myImg3" name="myImg3">
<br />
<img src="images/image4.jpg" id="myImg4" name="myImg4">
<br />
<img src="images/image5.jpg" id="myImg5" name="myImg5">
<br />
<img src="images/image6.jpg" id="myImg6" name="myImg6">
<br />
<img src="images/image7.jpg" id="myImg7" name="myImg7">
<br />
<img src="images/image8.jpg" id="myImg8" name="myImg8">
<br />
<img src="images/image9.jpg" id="myImg9" name="myImg9">
<br />
<img src="images/image10.jpg" id="myImg10" name="myImg10">
<br />
<img src="images/image11.jpg" id="myImg11" name="myImg11">
</div>

<script type="text/javascript">
  window.setTimeout("swapPicture1('myImgs')", 2000)
</script>
</body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

nikita.chandra 0 Junior Poster in Training · Answer 1 · 2010-10-01T12:45:30+00:00

thanks!
But let me clear one thing...
given below is the structure of home page
[1] [2] [3]
[4] [5] [6]

where [1] to [6] are places for images arranged in a table, at the place of [1] multiple images are displaying after 2 seconds continuously by the code i have posted earlier,and same i need to do for all the places . And [1] to [6] are not related with each other,they are independent for rotation.
please solve my issue... it's very urgent...
Thanks.

nikita.chandra 0 Junior Poster in Training · Answer 2 · 2010-10-04T17:37:23+00:00

hey thanks..
but my issue is similar to the last one..
initially
[1][2][3]
[4][5][6]

1st rotation
[1.1][2][3.1]
[4][5.1][6]

2nd rotation
[1.1][2.1][3.1]
[4.1][5.1][6.1]

3rd rotation

[1.2][2.1][3.2]
[4.1][5.2][6.1]

and so on...............

all the image tags are using different images contained in different folder. so that image will not be repeated at two or more places.

hope it will be clear now.... :)

Taywin 312 Posting Virtuoso · Answer 3 · 2010-10-04T21:41:41+00:00

OK, what you really need to think about this first is how you construct group of images for your page. From your example, you need 2 groups of images. You could have 2 variables holding each image set while using only 1 function. You would need a group identifier, so you could call it correctly.

Below is a sample code to display somewhat like what your example is but with only 4 image slots. There are 2 groups of these images. I did not put images in 2 variables though. Anyway, each group will swap images and will loop back to the first image display. Assuming that each image name is a consecutive number.

i.e.
// group1 has images [1, 3, 5, 7, 9, 11]
// group2 has images [2, 4, 6, 8, 10]
first display
[1] [2] [5] [6]

1st rotation => [3] [4] [9] [10]
2nd rotation => [5] [6] [11] [2]
3rd rotation => [7] [8] [1] [4]
4th rotation => [9] [10] [3] [6]
5th rotation => [11] [2] [5] [8]
6th rotation => [1] [4] [7] [10]
7th rotation => [3] [6] [9] [2]
and so on

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<script type="text/javascript">
  var dimages=new Array();

  // populate images in dimages
  for (var i=0; i<11; i++) {
    dimages.push("images/image"+(i+1)+".jpg")
  }

  function swapPicture(imgName) {
    var imgArr = document.getElementsByName(imgName)
    for (var i=0; i<imgArr.length; i++) { // each image found, attempt to swap it
      // starting image determines what image would be display (odd or even number)
      var startImg = imgName.match(/^myimggroup1$/i)? 0 : 1
      for (var j=startImg; j<dimages.length; j+=2) {
        if (imgArr[i].src.match(dimages[j])) {  // found image source, display next image
          if ((j+3)>dimages.length) {  // need this to play nicely with odd number
            if ((j%2)==0) {  // odd number display
              imgArr[i].src = dimages[0]
            }
            else {  // even number display
              imgArr[i].src = dimages[1]
            }
          }
          else {
            imgArr[i].src = dimages[(j+2)]
          }
          break  // break out from this j loop
        }
      }
    }  // imgArr
    window.setTimeout("swapPicture('"+imgName+"')", 2000)  // loop the swap
  }
</script>
</head>

<body>
<!-- Load all images before swapped display -->
<div id="allImgs" name="allImgs" style="display:none;visibility:hidden">
<img src="images/image1.jpg">
<img src="images/image2.jpg">
<img src="images/image3.jpg">
<img src="images/image4.jpg">
<img src="images/image5.jpg">
<img src="images/image6.jpg">
<img src="images/image7.jpg">
<img src="images/image8.jpg">
<img src="images/image9.jpg">
<img src="images/image10.jpg">
<img src="images/image11.jpg">
</div>

<img src="images/image1.jpg" name="myImgGroup1">
&nbsp;
<img src="images/image2.jpg" name="myImgGroup2">
&nbsp;
<img src="images/image5.jpg" name="myImgGroup1">
&nbsp;
<img src="images/image6.jpg" name="myImgGroup2">

</div>

<script type="text/javascript">
  window.setTimeout("swapPicture('myImgGroup1')", 1000)
  window.setTimeout("swapPicture('myImgGroup2')", 2000)
</script>
</body>
</html>

Hope it helps...