jQuery Background Rotator Example

By Dan Diplo

This page demostrates my very simple jQuery plug-in that rotates a sequence of background images, using a delay, on a DOM element.

This page has 3 examples. Two DIV elements and the BODY element. The code to call them is shown below

$(document).ready(function () {
    $("body").bgrotate({ delay: 4000, imagedir: "/images/backgrounds/", images: ["patterrific.jpg", "162.png", "90096.png"] });
    $("#div1").bgrotate({ delay: 800, imagedir: "/images/backgrounds/", images: ["pattern8-pattern-58a.png", "419.gif"] });
    $("#div2").bgrotate({ delay: 1200, imagedir: "/images/backgrounds/", images: ["Rust_Peel.jpg", "WetPaint2.jpg", "Old_Dollhouse.jpg"] });
});
                

div1

Mauris quis mollis nunc. Proin eget sapien lectus, vitae placerat mi. Nulla lobortis magna vitae diam aliquet tempus. Nulla dignissim odio quis ante tincidunt faucibus. Nam in mi felis, ac hendrerit nisl. Praesent in venenatis est. Aenean lacinia accumsan nisi dignissim pellentesque. Vestibulum pellentesque placerat erat, sit amet pulvinar libero commodo sed. Nulla dapibus mi auctor mi sollicitudin in molestie mi euismod. Pellentesque sodales tincidunt congue. Curabitur pharetra condimentum interdum. Donec et sem ac neque bibendum euismod. Mauris commodo vulputate dui, eu sagittis sem vehicula non. Ut ultricies ultrices placerat. Ut tristique arcu nec augue ornare iaculis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris urna ante, accumsan sed tristique quis, suscipit nec magna.

div2

Etiam dictum nulla vel turpis pretium id ornare augue scelerisque. Sed neque arcu, ornare vitae adipiscing vel, cursus non turpis. Fusce sit amet risus turpis. Maecenas odio orci, lobortis eget semper at, egestas nec diam. Cras in convallis lacus. Vestibulum pellentesque iaculis aliquet. Duis dictum erat eget mauris fringilla sed dignissim est placerat. Nam auctor, diam et molestie facilisis, magna turpis congue lectus, sit amet vehicula purus nunc tincidunt erat. Quisque luctus massa quis nulla ultricies ullamcorper eu vel nibh. Integer pharetra arcu lacus.

Download

You can download the jQuery plug-in here.

Read the original blog-post for this example is Simple jQuery Background Image Rotator.