In my other tutorial, I covered how to create a rotating banner using CSS and a simple random PHP script.  This howto or tutorial covers creating a rotating banner or background using Jquery and a bit of CSS.

It is no more complex than the first method, but to get started you need the Jquery module installed.

Jquery is available here at: http://drupal.org/project/jquery_ui

Jquery requires some code to be downloaded and extracted into the module before being uploaded.  Read the documentation for the module for installation information.

Create a new directory

In your theme directory create a new directory called innerfade

Download and extract

Download and unzip the innerface script from its original owner from http://medienfreunde.com/lab/innerfade/

OR download it from here

Upload jquery.innerfade.js

Upload the file jquery.innerfade.js to your innerfade folder that was created in a previous step.

Add the jquery script to template.php

Open your theme's template.php and add the following to the bottom.

drupal_add_js(path_to_theme('YourThemeName') . '/innerfade/jquery.innerfade.js');
drupal_add_js('
$(document).ready(function(){
  $("#header-image img").show();
  $("#header-image").innerfade({
    speed: 1000,
    timeout: 6000,
    type: "sequence",
    containerheight: "200px"
  });
});
', inline);

Not all theme's have an ending ?> PHP tag in their template file.  Its OK if the file does not, and if it does put the code before the closing tag.

Transition Time
The setting: speed: 3000 sets the transition speed between the pictures. In this case, the transition time is 3 seconds between pictures. Increasing this to 5000 will make the transition time 5 seconds between pictures.

Display Time
The setting: timeout: 20000 sets the picture display time. In this case the picture is displayed for 20 seconds then the next one for 20 seconds. Increasing this value will increase the time for which the picture is displayed.

Edit page.tpl.php

Open your theme's page.tpl.php and add where applicable the following:

<img src="<?php print base_path() ?>/<?php print path_to_theme() ?>images/banner/header_image0.jpg" alt="header image 0" />
<img style="display:none;" src="<?php print base_path() ?>/<?php print path_to_theme() ?>/images/banner/header_image1.jpg" alt="header image 1" />
<img style="display:none;" src="<?php print base_path() ?>/<?php print path_to_theme() ?>images/banner/header_image2.jpg" alt="header image 2" />

Voila!

Upload the edited files and refresh your theme.