jquery - 创建单击即可更改的网站背景图像

Question

我想知道如何创建单击时会更改的背景图像。它应该通过这样的一系列图像。任何线索如何做到这一点？

Answer 1

jQuery 方式

这是一个基本的 jQuery 解决方案：

var images = [
  'http://placekitten.com/500/500',
  'http://placekitten.com/400/400',
  'http://placekitten.com/750/750'
];

$(".changeBG").on("click", function(){
  $("body").css("backgroundImage", function( o, v ) {
    var backg = v.match( /\((.+)\)/ );
    var index = $.inArray( ( backg ? backg[1] : "" ), images );
    return "url('" + ( images[++index] || images[0] ) + "')";
  });
});

演示：http: //jsbin.com/isubag/2/edit

纯 JavaScript（几乎）方式

该解决方案在 jQuery 上相当繁重，这会稍微减慢它的速度。您可以采用更全面的方法。不幸的是，仍然有使用$.inArray（尽管polyfills 确实存在），因为indexOf对数组的原生支持并不是那么好。

var bg = {
  images: [
    'http://placekitten.com/500/500',
    'http://placekitten.com/400/400',
    'http://placekitten.com/750/750'
  ],
  get: function () {
    var match = document.body.style.backgroundImage.match( /\((.+)\)/ );
    return match ? match[1] : "" ;
  },
  set: function ( url ) {
    document.body.style.backgroundImage = "url('" + url + "')" ; 
  }
};

function bgCycler () {
  var index = $.inArray( bg.get(), bg.images );
  bg.set( bg.images[++index] || bg.images[0] );
}

演示：http: //jsbin.com/isubag/edit#javascript,html