基于CSS3混合模式轮播图jQuery特效

var demos = [];

var cloudsuit = {

  one: {

    bg: "images/ZnkfwAR.jpg",

    bm: "none" },

  two: {

    bg: "images/ONBXKkS.jpg",

    bm: "lighten" },

  three: {

    bg: "images/qKNpn9G.png",

    bm: "multiply" } };

demos.push(cloudsuit);

var urbansky = {

  one: {

    bg: "images/l1MS7kk.jpg",

    bm: "none" },

  two: {

    bg: "images/6QBLNy6.jpg",

    bm: "multiply" },

  three: {

    bg: "images/bmnzJRs.png",

    bm: "none" } };

demos.push(urbansky);

var knowledge = {

  one: {

    bg: "images/YpTSfYD.jpg",

    bm: "none" },

  two: {

    bg: "images/ziAdjNM.jpg",

    bm: "multiply" },

  three: {

    bg: "images/dnfONso.png",

    bm: "none" } };

demos.push(knowledge);

var container = document.getElementById("container");

var active;

var applyDemo = function (number) {

  console.log(number);

  var go = demos[number - 1];

  container.innerHTML = "";

  var f1 = document.createElement("div");

  f1.setAttribute("id", "f1");

  var style = "background-image: url(" + go.one.bg + "); mix-blend-mode: " + go.one.bm + ";";

  f1.setAttribute("style", style);

  container.appendChild(f1);

  var f2 = document.createElement("div");

  f2.setAttribute("id", "f2");

  var style = "background-image: url(" + go.two.bg + "); mix-blend-mode: " + go.two.bm + ";";

  f2.setAttribute("style", style);

  container.appendChild(f2);

  var f3 = document.createElement("div");

  f3.setAttribute("id", "f3");

  var style = "background-image: url(" + go.three.bg + "); mix-blend-mode: " + go.three.bm + ";";

  f3.setAttribute("style", style);

  container.appendChild(f3);

  active = number;

  document.body.setAttribute("data-demo", number);

};

applyDemo(1);

$('.demos').on('click', 'a', function (event) {

  event.preventDefault();

  var t = this;

  if (active == t.getAttribute("data-go")) return;

  $(container).fadeOut({

    duration: 1000,

    complete: function () {

      applyDemo(t.getAttribute("data-go"));

      $(container).fadeIn(1000);

    } });

});