尝试使用CSS和JQUERY循环播放幻灯片中的多个背景图像

尝试使用CSS和JQUERY循环播放幻灯片中的多个背景图像

尝试从

css

background-image

值创建数组，淡入，淡出第一背景图像;
从数组中删除褪色的背景图像，将删除的背景图像放置在数组的最后一个索引处; 将背景图像值重置为以逗号连接的数组；淡入，淡出，现在首先索引背景图像;
循环淡入，淡出所有背景图像; 递归调用function，以尝试创建“无限”淡入，淡出“ slideshow”的显示效果

$(function() {  // set `$.fx.interval` at `0`  $.fx.interval = 0;  (function cycleBgImage(elem, bgimg) {// `elem`:`#slideshow`// set, reset, delay to `1000` after background image resetelem.css("backgroundImage", bgimg)  // fade in background image  .fadeTo(3000, 1, "linear", function() {    // set `delay` before fadeing out image    // fade in background image    $(this).delay(3000, "fx").fadeTo(3000, 0, "linear", function() {      // split background image string at comma , creating array      var img = $(this).css("backgroundImage").split(","),        // concat first background image to `img` array,        // remove first background image from `img` array        bgimg = img.concat(img[0]).splice(1).join(",");      // recursively call `cycleBgImage`      cycleBgImage(elem, bgimg);    });  });  }($("#slideshow")));});body {  width: 400px;  height: 400px;}.slideshow {  background: #000;  display:block;  width:inherit;  height:inherit;}#slideshow {  width: 100%;  height: 100%;  display: block;  opacity: 0.0;  background-color: #000;    background-image: url("http://lorempixel.com/400/400/cats/?1"),    url("http://lorempixel.com/400/400/animals/?2"),    url("http://lorempixel.com/400/400/nature/?3"),    url("http://lorempixel.com/400/400/technics/?4"),    url("http://lorempixel.com/400/400/city/?5");  background-size: cover, 0px, 0px, 0px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div >  <div id="slideshow"></div></div>