0

Hello,

I am using this script to rotate background images and it is working great HOWEVER we would like to control the order of the rotation and I am just not sure how to modify this code to do that?

I have looked and tried several options but I am just missing something and appreciate any help you can provide.

<script type="text/javascript">
function ChangeCSSBgImg() {
if (!document.getElementById) return true;

var MyElement = "logo" //The ID of the element you want to change
var ImgPath = "graphics/en-US/new/rotate/" //The file path to your images

if (!document.getElementById(MyElement)) return true;

var random_images = new Array (5);
random_images[0] = "company_logo-1.jpg";
random_images[1] = "company_logo-2.jpg";
random_images[2] = "company_logo-3.jpg"; 
random_images[3] = "company_logo-4.jpg";
random_images[4] = "company_logo-5.jpg";
random_images[5] = "company_logo-6.jpg";
random_images[6] = "company_logo-7.jpg";
random_images[7] = "company_logo-8.jpg";
random_images[8] = "company_logo-9.jpg";
random_images[9] = "company_logo-10.jpg";
var $header = document.getElementById(MyElement);
var $backgroundurl = $header.style.backgroundImage;
var ImgURL = "url(" + ImgPath + random_images[rand(random_images.length)] + ")";

if ($backgroundurl != ImgURL) {
$header.style.backgroundImage = ImgURL;
}

movement = setTimeout("ChangeCSSBgImg()",14000);
}

/* random number generator */
function rand(n) {
    return ( Math.floor ( Math.random ( ) * n ) );
}

/* Custom onload function */

function addLoadEvent(func) {
    var oldonload = window.onload;
        if (typeof window.onload != 'function') {
        window.onload = func;
        } else {
        window.onload = function() {
    oldonload();
func();
}
}
}

/* trigger onload */

addLoadEvent(ChangeCSSBgImg); 

</script>
3
Contributors
3
Replies
4
Views
7 Years
Discussion Span
Last Post by fxm
0

What is causing the random order is :

var ImgURL = "url(" + ImgPath + random_images[rand(random_images.length)] + ")";
  
/* random number generator */
function rand(n) {
    return ( Math.floor ( Math.random ( ) * n ) );
}

Instead of allowing your random number function call the shots try adding an attribute to the image that is the position of the current image in the image array. When you go to get Image url just add 1 and take the modulus (so it stays within the bounds of your array length). Then you just arrange the order in your images array.

var $header = document.getElementById(MyElement);
var currPosition = $header.getAttribute("currImage")?   $header.getAttribute("currImage"):0;

var newPos = getNextImage(currPosition, random_images.length);
var ImgURL = "url(" + ImgPath + random_images[newPos] + ")";
$header.setAttribute("currImage") = newPos;

/* non random order determinate */
function getNextImage(currPosition, arrLen)
{
   currPosition++;
   return (currPosition % arrLen);
}
0

I tried modifying the code with that which you have provided. Pardon my ignorance here but I am not sure how to add an attribute to the images that would order them.

Thanks!

0

The setAttribute() does that for you.

FWIW, this version

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title></title>

  </head>

  <body>

<div id='logo'></div>

	<script type="text/javascript">

        var imgcur = -1
        var imgs = ["company_logo-1.jpg", "company_logo-2.jpg", "company_logo-3.jpg", "company_logo-4.jpg", "company_logo-5.jpg", "company_logo-6.jpg", "company_logo-7.jpg", "company_logo-8.jpg", "company_logo-9.jpg", "company_logo-10.jpg"]
        var imglen = imgs.length

        var MyElement = "logo" //The ID of the element you want to change
        var ImgPath = "graphics/en-US/new/rotate/" //The file path to your images
        var $header = document.getElementById(MyElement);

        function ChangeCSSBgImg() {
            $header.style.backgroundImage = "url(" + ImgPath + imgs[++imgcur<imglen?imgcur:imgcur=0] + ")";

            movement = setTimeout("ChangeCSSBgImg()", 14000);
        }


        /* Custom onload function */

        function addLoadEvent(func) {
            var oldonload = window.onload;
            if (typeof window.onload != 'function') {
                window.onload = func;
            } else {
                window.onload = function () {
                    oldonload();
                    func();
                }
            }
        }

        /* trigger onload */

        addLoadEvent(ChangeCSSBgImg); 

	</script>

  </body>
</html>

uses a different approach. It also moves the one-time code out of the loop.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.