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="//code.jquery.com/jquery.min.js"></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

$('.container').bgChange(imageArray,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);
        imgChange.change();
        var timer = interval(imgChange);
        var changeFlag = false;

        /* switch background images on click */

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

            /* clear interval */
            clearInterval(timer);
            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 () {
            changeEle.change();
        }, time);
    }
}

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

5. Default plugin options

$('.container').bgChange(imageArray,{

  // 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.