我正在尝试查看页面的 CSS 中 body 样式背景是否在 URL 中没有任何内容,然后淡入和淡出一组图像。
这是我的代码,但它似乎没有做任何事情或抛出任何错误
<style>
html {
}
body
{
background-color: transparent;
background: url([%MEDIA_URL%]) no-repeat center center fixed;
background-size: cover;
}
@media (max-width: 1024px) {
html {
background: url([%MEDIA_URL%]) no-repeat center center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}
body
{
background-color: transparent;
background: none;
height:100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
}
</style>
<script>
$(document).ready(function () {
if ($('body').css("background") === 'url()') {
(function($) {
var bgImageArray = ['exterior.jpg', 'chairs.jpg', 'entrance-logo.jpg'],
base = "http://stage.houstonian.com/resources/1/BG_Images/",
secs = 6;
bgImageArray.forEach(function(img){
new Image().src = base + img;
// caches images, avoiding white flash between background replacements
});
function backgroundSequence() {
console.log('url(' + base + bgImageArray[0] +')');
window.clearTimeout();
var k = 0;
for (i = 0; i < bgImageArray.length; i++) {
setTimeout(function(){
$('body').css({
'background': "url(" + base + bgImageArray[k] + ")"
});
if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 1000))} else { k++; }
}, (secs * 1000) * i)
}
}
backgroundSequence();
}(jQuery));
}
});
</script>
如有任何帮助,我们将不胜感激。我从这个工作 fiddle 中获得的背景图像数组。 https://jsfiddle.net/sm1215/r5or5w6m/3/
让它随机也很好:)
最佳答案
这个怎么样?
Updated! Now complete with a
STOP
button!
if (!window.hasOwnProperty('bgChanger')) {
window.bgChanger = {
baseHref: 'http://stage.houstonian.com/resources/1/BG_Images/',
imgArray: ['exterior.jpg', 'chairs.jpg', 'entrance-logo.jpg'],
secs: 2, // changed seconds to 2 just for quick show
tmr: void 0,
init: function() {
bgChanger.setBGImg();
bgChanger.sequencer();
},
getNextImgPath: function() { // will get random image path
return this.baseHref + this.imgArray[~~(Math.random() * (this.imgArray.length - 0))];
},
sequencer: function() {
if (this.tmr) clearTimeout(this.tmr);
this.tmr = setTimeout(this.init, this.secs*1e3);
},
setBGImg: function() {
var imgPath = this.getNextImgPath(),
current = $('body').css('backgroundImage');
// this while statement helps ensure a different image everytime
while (current.match(imgPath)) imgPath = this.getNextImgPath();
$('body').css('backgroundImage', 'url('+imgPath+')');
},
stop: function() { if (this.tmr) clearTimeout(this.tmr); }
}
// preloader
bgChanger.imgArray.forEach(function(img) { new Image().src=bgChanger.baseHref+img; });
}
$(function() {
if (!$('body').css("background-image").match(/url\(.*(gif|jpg|jpeg|tiff|png)/i)) bgChanger.init();
$('button').click(function(e) {
if ($(this).text() == 'STOP') {
$(this).text('GO');
bgChanger.stop();
}
else {
$(this).text('STOP');
bgChanger.init();
}
});
})
html, body { height: 100%; width: 100%; }
body {
background-color: transparent;
background: url() no-repeat center center fixed;
background-size: cover;
}
table { height: 100%; width: 100%; }
th { height: 100%; text-align: center; vertical-align: middle; }
button { font-size: 2em; padding: 1em 1.5em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table><tr><th><button>STOP</button></th></tr></table>
关于jQuery Body CSS 背景 URL 如果为空随机 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35779254/