我正在尝试将渐变效果应用于javascscript背景幻灯片。当我更改值时,JS忽略了它。我尝试了fadeIn和fadeOut。这个代码出了什么问题?
var bgimages=new Array()
bgimages[0]="tenis.jpg"
bgimages[1]="rtrr.jpg"
bgimages[2]="tenis.jpg"
//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++) {
pathToImg[i]=new Image()
pathToImg[i].src=bgimages[i]
}
var inc=-1
function bgSlide() {
if (inc<bgimages.length-1)
inc++
else
inc=0
document.body.background=pathToImg[inc].src
}
if (document.all||document.getElementById)
window.onload=new Function('bgSlide(); setInterval("bgSlide()",3000),fade(2000)')
您不能淡入背景图像。您可以淡入<img>
标记中的图像。
这是我的jsFiddle演示。
以下是一些示例代码(包括JQuery、CSS和HTML):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
img{
position:absolute;
top:0;
display:none;
width:auto;
height:100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function fader() {
$("img").first().appendTo('#wrap').fadeOut(3000);
$("img").first().fadeIn(3000);
setTimeout(fader, 4200);
}
</script>
</head>
<body onLoad="fader();">
<div id="wrap">
<img src="http://stats.hashweb.org/static/img/jsfiddle-logo.png">
<img src="http://startbootstrap.com/templates/freelancer/img/profile.png">
<img src="http://www.silvercoinstoday.com//images/Silver-Element-Atomic-Structure.jpg">
</div>
</body>
</html>
虽然"你不能淡入背景图像"是真的,但你可以淡入和淡出那些背景URL是你想要淡入的图像的div。
然而,上面来自totallytotalyamazing的演示并没有给出所需的结果,即图像应该从一个图像溶解到另一个图像,并且不会在两者之间留下空白屏幕。