Member Avatar for jlhwebgal

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
  • 138 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by fxm
Member Avatar for scrappedcola

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);
}
Member Avatar for jlhwebgal

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!

Member Avatar for fxm

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.

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.