jQuery.BgSwitcher 
Switch the background image with using effect.
Demo
http://rewish.github.io/jquery-bgswitcher/
Usage
<div class="box">
<p>Lorem ipsum dolor sit amet.</p>
</div>
$(".box").bgswitcher({
images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
... Something Config ...
});
For example, if you want to disable the loop of switching:
$(".box").bgswitcher({
images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
loop: false
});
Configs
| Key | Type | Default | Description |
|---|---|---|---|
| images | array | [] | Background images |
| interval | number | 5000 | Interval of switching |
| start | boolean | true | Start the switch on after initialization (Calling the Methods) |
| loop | boolean | true | Loop the switch |
| shuffle | boolean | false | Shuffle the image order |
| effect | string | fade | Effect type (Built-In effect types) |
| duration | number | 1000 | Effect duration |
| easing | string | swing | Effect easing |
Effect Types
Built-In effect types
- fade
- blind
- clip
- slide
- drop
- hide (No effect)
Adding the effect type
First, define effect with using the $.BgSwitcher.defineEffect().
$.BgSwitcher.defineEffect("extraSlide", function($el) {
$el.animate({left: $el.width()}, this.config.duration, this.config.easing);
});
Then, specify the effect name that you added.
$(".box").bgswitcher({
images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
effect: "extraSlide"
});
Calling the Methods
Support the method calls like jQuery UI Widget.
$(".box").bgswitcher("method name");
You can call various methods, For example:
| Name | Description |
|---|---|
| start | Start the switching |
| stop | Stop the switching |
| toggle | Toggle between start/stop |
| reset | Return to the first switching |
| select | Select the switching at index |
| next | Go to the next switching |
| prev | Go to the previous switching |
| destroy | !!Destroy BgSwitcher!! |
Example for select with button:
var $el = $(".box").bgswitcher({
images: ["foo.jpg", "bar.jpg", "baz.jpg"]
});
$("button").on("click", function() {
$el.bgswitcher("select", 1); // bar.jpg
});
Dependencies
Requires jQuery 1.7.x or higher.
Support browsers
- IE7+
- and modern browsers
- Mobile Safari
Running the Tests
Setup the modules required for testing.
git submodule update --init --recursive
You can testing in two ways:
- Open the
test/index.htmlin the Web browser - Command Line Testing with the PhantomJS
phantomjs lib/mocha-phantomjs/lib/mocha-phantomjs.coffee test/index.html
License
The MIT License, Copyright (c) 2009-2014 @rewish.
526 Nov 29, 2022
123 Dec 27, 2022
976 Dec 30, 2022
8 May 6, 2022
50 Oct 28, 2022
1.8k Dec 21, 2022
198 Nov 18, 2022
797 Nov 26, 2022
58 Sep 3, 2022
561 Dec 24, 2022
829 Dec 25, 2022