如何将html背景图片旋转,jQuery-如何使用CSS和Javascript旋转(或更改)背景图片

我已经看了几个小时的stackoverflow,发现了一个与我要实现的目标相似的主题

当我在脚本中修改此解决方案时,我完全没有背景图片,因此我想回到源头获得一些新鲜的见解和想法.

这是我的设置：

的HTML

CSS：

.background-1 {

background: url('Images/mybg1.jpg');

-webkit-transition: background 500ms linear;

-moz-transition: background 500ms linear;

-o-transition: background 500ms linear;

-ms-transition: background 500ms linear;

transition: background 500ms linear;

}

.background-2 {

background: url('Images/mybg2.jpg');

-webkit-transition: background 500ms linear;

-moz-transition: background 500ms linear;

-o-transition: background 500ms linear;

-ms-transition: background 500ms linear;

transition: background 500ms linear;

}

head标签中的Javascript

$(document).ready(function(){

setInterval(function() {

if($('#background').hasClass('background-1')) {

$('#background').addClass('background-2');

setTimeout(function() {

$('#backdrop').removeClass('background-1');

}, 1000);

}

else if($('#background').hasClass('background-2')) {

$('#background').addClass('background-1');

setTimeout(function() {

$('#backdrop').removeClass('background-2');

}, 1000);

}

}, 2000);

});

我想以某种方式能够将多个图像用作背景,并使它们每5秒钟左右换一次.我该怎么做呢？

这是我尝试过的

的HTML

CSS：

#Background, img.bgM {

background:#fff no-repeat 0 bottom;position:absolute;bottom:0;min-width:960px;min-height:100%;z-index:-99999;

background-position: top center;

}

Javascript：

$(document).ready(function() {

$('#Background').cycle({

fx: 'fade',

pager: '#smallnav',

pause: 1,

speed: 1800,

timeout: 3500

});

});

最后一个解决方案有效,但是我无法将图像放置在顶部中心位置(即使在css中指定).对此,我们将给予任何帮助！