创建在单击时更改的网站背景图像

Question

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

Answer 1

jQuery Way

这是一个基本的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