Question

我试图看看在页面上的CSS中，正文样式背景在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>

非常感谢任何帮助。我从这个工作小提琴得到的背景图像数组。 https://jsfiddle.net/sm1215/r5or5w6m/3/

将其随机化也很好：）

Answer 1

这个怎么样？

已更新！现在完成STOP按钮！

＆＃13;

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();
		}
	});
	
})

＆＃13;

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; }

＆＃13;

<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>

＆＃13;

如果为空随机URL，则为jQuery Body CSS后台URL

1 个答案: