如何使用CSS和Javascript旋转（或更改）背景图像 [英] How can I rotate(or change) background image using CSS and Javascript
问题描述
当我在我的脚本中修改这个解决方案，我没有得到任何背景图像，所以我想我会回到源
这是我的设置：
HTML
< div id =Background>< / div>
CSS：
code> .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 ;
}，1000）;
}
else if（$（'＃background'）。hasClass（'background-2'））{
$（' ）.addClass（'background-1'）;
setTimeout（function（）{
$（'＃backdrop'）。removeClass（'background-2'）;
}，1000） ;
}
}，2000）;
}）;
我想以某种方式使用几个图像作为背景，每隔5秒左右。
$ b
< div id =Background>
< img src =<％= skinpath％> /images/mybg2.jpgclass =bgM/>
< img src =<％= skinpath％> /images/mybg1.jpgclass =bgM/>
< / div>
CSS：
code> #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 =serverFilePath =js / jquery.cycle.all.jsPathNameAlias =SkinPath/&
< script type =text / javascriptsrc =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
}）;
}）;
这最后一个解决方案工作，但我无法获得图像位置顶部中心（即使在
您可以尝试为每个图像使用不同的类，然后只是交换
$（document）.ready（function（）{
var seconds = 5000;
var step = 0;
var limit = 5;
$（＃Background）。addClass（image - + step）;
setInterval（function（）{
$（＃Background）。removeClass（image - + step）;
step =（step> limit）？0：step + 1 ;
$（＃Background）。addClass（image - + step）;
}，seconds）;
}
我不知道你想要做什么样的动画，但你可以 fadeOut ，然后 fadeIn 。
$（document）.ready（function（）{
var seconds = 5000;
var step = 0;
var limit = 5;
$ #Background）。addClass（image - + step）.fadeIn（500）;
setInterval（function（）{
$（＃Background）。fadeOut ，function（）{
$（this）.removeClass（image - + step）;
step =（step> limit）？0：step + 1;
$ #Background）。addClass（image - + step）.fadeIn（500）;
}）;
}，seconds）;
}
I have taken a look through stackoverflow for hours now, and I have found a topic similar to what I am trying to achieve
How to change the "background-image" css attribute with JavaScript?
When I modify this solution in my script, I get no background image at all so I thought I would come back to the source to get some fresh eyes and thoughts.
Here is my setup: 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 in the head tag
<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);
});
I want to somehow be able to use several images for the background and have them change out every 5 or so seconds. How do I do this?
Here is what I have tried 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
});
});
This last solution worked however I could not get the image to position top center(even when specified in the css.) Any help on this is greatly appreciated!
You could try using different classes for each image, and then just swap out CSS classes in a given interval.
$(document).ready(function(){
var seconds = 5000;
var step = 0;
var limit = 5;
$("#Background").addClass("image-"+step);
setInterval(function(){
$("#Background").removeClass("image-"+step);
step = (step > limit) ? 0 : step + 1;
$("#Background").addClass("image-"+step);
},seconds);
});
I'm not sure what kind of animation you are trying to do, but you could fadeOut and then fadeIn.
$(document).ready(function(){
var seconds = 5000;
var step = 0;
var limit = 5;
$("#Background").addClass("image-"+step).fadeIn(500);
setInterval(function(){
$("#Background").fadeOut(500,function(){
$(this).removeClass("image-"+step);
step = (step > limit) ? 0 : step + 1;
$("#Background").addClass("image-"+step).fadeIn(500);
});
},seconds);
});
这篇关于如何使用CSS和Javascript旋转（或更改）背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
