创建单击即可更改的网站背景图像答案

【问题标题】：Create website background image that changes on a click创建单击即可更改的网站背景图像
【发布时间】：2012-05-11 11:09:09
【问题描述】：

我想知道如何创建一个点击后会改变的背景图片。它应该通过这样的一系列图像。任何线索如何制作这个？

【问题讨论】：

能否请您重新链接您的示例？谢谢！

标签： jquery html background

【解决方案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 do exist），因为在数组上对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

【讨论】：