背景图像随着褪色而旋转 [英] background image to rotate with a fade
问题描述
我要弄清楚的是如何在不使用div主体中的图像的情况下使背景图像随着标题中的淡化而旋转.
我可以使用下面的代码在div中实现图像更改/旋转.但是我必须刷新页面才能更改图像.
Hi,
What I''m trying to figure out is how to get background images to rotate with a fade in a header without using an image in div in the body.
I can achieve an image changing/rotating in a div using the code just below. But I have to refresh the page for the image to change.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Rotate Images</title>
<script type="text/javascript">
var backgroundSrcs = new Array("list-of-images");
function pickimage()
{
//This line picks an image at random from the list you entered above
var bgimage=backgroundSrcs[(Math.round(Math.random()*(backgroundSrcs.length-1)))]
//This line applies the background image to your header
document.getElementById("header").style.background = "url(''" + bgimage + "'') no-repeat";
}
</script>
<style type="text/css">
#header {
padding:125px 10px;
margin-top: 0px;
background-repeat: no-repeat;
}
h1 {
padding-bottom: 0;
font-size: 1.95em;
color: #f0ebee;
}
</style>
</head>
<body onLoad="pickimage();">
<div id="header">
<h1>abc def ghi</h1>
</div>
</body>
</html>
而且我可以使用下面的javascript来旋转图像，自行改变图像，但必须通过占位符img div来实现.
And I can get the image to rotate, change on its own, with the javascript below but have to do it using through an img div, a place-holder.
<pre lang="xml"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Rotate Images through img tag</title>
<script type="text/javascript">
var rotatingImages = new Array("../list-of-images");
imageCount = rotatingImages.length;
firstTime = true;
duration = "3"; //seconds
function rotateImage(){
// Cycle through images sequentially starting with a random image
// Do not update the image if loading is not yet completed
if (document.getElementById(''rotatingImage'').complete || firstTime){
if (firstTime) {
thisImage = Math.floor((Math.random() * imageCount))
firstTime = false
}else{
thisImage++
if (thisImage == imageCount) {
thisImage = 0
}
}
document.getElementById(''rotatingImage'').src = rotatingImages[thisImage]
setTimeout("rotateImage()", duration * 1000)
}
}
</script>
<style type="text/css">
#rotatingImage{
display:block;
width:750px;
border:2px solid #997;
}
</style>
</head>
<body onLoad="rotateImage();">
<div id="header">
<img id="rotatingImage" src="" alt="">
</div>
</body>
</html>
因此，我真正想做的是使图像在div中旋转，而不必显示img标签.
非常感谢
So what I really would like to do is have the image rotate through the div and not have to have the img tag present.
thanks ever so much
推荐答案
请看看jQuery及其插件之一:http://labs.juliendecaudin.com/barousel/#ba_demos [
Please have a look at jQuery and one of it''s plugins: http://labs.juliendecaudin.com/barousel/#ba_demos[^].
That should help you achieve your goals!
Regards,
这篇关于背景图像随着褪色而旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
