Cool Background Image Transition Effects - jQuery bgChange

File Size: 17.1 KB
Views Total: 9014
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Cool Background Image Transition Effects - jQuery bgChange

bgChange is a small jQuery background slideshow plugin that automatically switches between background images with a cool configurable transition effect.

How to use it:

1. First you need to load the latest version of jQuery library in the document.

<script src="//"></script>

2. Download and load the bgChange plugin's files in the document. Note that the JavaScript file 'bgChange.js' must be loaded after jQuery library.

<link rel="stylesheet" href="changContain.css">
<script src="bgChange.js"></script>

3. Basic usage:

  • imagearray: an array of images to switch between
  • options: plugin options

4. Advanced usage:

/* image array */
var data = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];

function bgAnimation(init, interval) {

    var ele = $(init.ele);

    $.preLoad(data).then(function () {

        var imgChange = ele.bgChange(data, init);
        var timer = interval(imgChange);
        var changeFlag = false;

        /* switch background images on click */

        ele.on('click', function () {
            if (changeFlag)return;
            changeFlag = true;

            /* clear interval */
            timer = interval(imgChange);

        /* events */
        ele.on('changeStart', function () {
            changeFlag = true;
        ele.on('changeEnd', function () {
            changeFlag = false;


function interval(time) {
    return function (changeEle) {
        return setInterval(function () {
        }, time);

bgAnimation({ele: '.container'}, interval(10000));

5. Default plugin options


  // how many rows to generate
  row: 7,

  // how many columns to generate
  col: 9,

  // import external SCSS
  scss: true

This awesome jQuery plugin is developed by acccco. For more Advanced Usages, please check the demo page or visit the official website.