代码之家 › 专栏 › 技术社区 › user2097021

背景幻灯片(javascript)渐变效果

fade slideshow css html javascript

user2097021 · 技术社区 · 12 年前

我正在尝试将渐变效果应用于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)')

2 回复 | 直到 12 年前

totallytotallyamazing 8 年前

您不能淡化背景图像。您可以淡入图像 <img> 标签。

这是我的jsFiddle DEMO .

以下是一些示例代码(包括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>

Paul Appleby 11 年前

虽然“你不能淡化背景图像”是真的,但你可以淡化和淡化那些背景URL是你想要淡化的图像的DIV。

然而,上面的演示来自totallytalamazing,并没有给出理想的结果,图像应该从一个到另一个溶解,并且不会在其间留下空白屏幕。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前