我已经在stackoverflow上查找了数小时,并找到了一个与我尝试实现的类似主题。
JavaScript,如何每隔x秒更改div标记的背景
当我在我的脚本中修改此解决方案时,我根本没有背景图像,所以我想回到源头寻求一些新的想法。
这是我的设置: HTML
这个最后的解决方案可行,但我无法将图片定位在顶部中心(即使在CSS中指定了)。非常感谢任何帮助!
这是我的设置: HTML
<div id="Background"></div>
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;
}
标签中的Javascript
<script>
$(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
<div id="Background">
<img src="<%=skinpath%>/images/mybg2.jpg" class="bgM"/>
<img src="<%=skinpath%>/images/mybg1.jpg" class="bgM"/>
</div>
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:
<dnn:DnnJsInclude runat="server" FilePath="js/jquery.cycle.all.js" PathNameAlias="SkinPath" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
$(document).ready(function() {
$('#Background').cycle({
fx: 'fade',
pager: '#smallnav',
pause: 1,
speed: 1800,
timeout: 3500
});
});
这个最后的解决方案可行,但我无法将图片定位在顶部中心(即使在CSS中指定了)。非常感谢任何帮助!
code .image1{background:#fff url('Images/kdmcbg1.jpg') no-repeat 0 bottom;} .image2{background:#fff url('Images/kdmcbg2.jpg') no-repeat 0 bottom;}
这是你想要的吗? - Skullomania.image-0{background} .image-1{background}
等等。 - Reactgular(step < limit)
改为(step > limit)
。 - Reactgular