css 超简单的jQuery背景图像随机幻灯片（使用CSS3进行转换，并通过HTML5`data`属性获取图像路径）。

Posted 2021-05-13

/*! slides | https://gist.github.com/mhulse/66bcbb7099bb4beae530 */
!function(t){"use strict";var a=t("[data-slides]"),s=a.data("slides"),e=s.length,n=function(){a.css("background-image",'url("'+s[Math.floor(Math.random()*e)]+'")').show(0,function(){setTimeout(n,5e3)})};n()}(jQuery);

/*! slides | https://gist.github.com/mhulse/66bcbb7099bb4beae530 */
(function($) {
	
	'use strict';
	
	var $slides = $('[data-slides]');
	var images = $slides.data('slides');
	var count = images.length;
	var slideshow = function() {
		$slides
			.css('background-image', 'url("' + images[Math.floor(Math.random() * count)] + '")')
			.show(0, function() {
				setTimeout(slideshow, 5000);
			});
	};
	
	slideshow();
	
}(jQuery));

<div
	class="test"
	data-slides='[
		"uploads/banner1.jpg",
		"uploads/banner2.jpg",
		"uploads/banner3.jpg",
		"uploads/banner4.jpg",
		"uploads/banner5.jpg",
		"uploads/banner6.jpg",
		"uploads/banner7.jpg",
		"uploads/banner8.jpg",
		"uploads/banner9.jpg"
	]'
> … </div> <!-- /.primary -->

[data-slides] {
	background-image: url(../../uploads/banner1.jpg); /* Default image. */
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	transition: background-image 1s linear;
}

/* Use additional CSS to control the `height` of `[data-slides]`, like so: */

.test { height: 220px; }
@media all and (min-width: 48em) {
	.test { height: 320px; }
}