如何使HTML/CSS幻灯片放映背景淡入淡出？

我想知道如何使背景幻灯片淡入其他照片，如常规幻灯片。我已经尝试了很多代码，但尚未成功。如何使HTML/CSS幻灯片放映背景淡入淡出？

现在，我有一个代码，以使背景变化到不同的照片效果很好，但它不褪色。无论如何添加这个？

下面是代码

<html> 
<head> 

<style> 


body{ 
/*Remove below line to make bgimage NOT fixed*/ 
background-attachment:fixed; 
background-repeat: no-repeat; 
background-size: cover; 
/*Use center center in place of 300 200 to center bg image*/ 
background-position: 0 0; background- 
} 
</style> 

<script language="JavaScript1.2"> 

//Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com) 
//For full source code, 100's more DHTML scripts, and TOS, 
//visit http://www.dynamicdrive.com 

//Specify background images to slide 
var bgslides=new Array() 
bgslides[0]="http://i892.photobucket.c… 

bgslides[1]="http://i892.photobucket.c… 

bgslides[2]="http://i892.photobucket.c… 

//Specify interval between slide (in miliseconds) 
var speed=2000 

//preload images 
var processed=new Array() 
for (i=0;i<bgslides.length;i++){ 
processed[i]=new Image() 
processed[i].src=bgslides[i] 
} 

var inc=-1 

function slideback(){ 
if (inc<bgslides.length-1) 
inc++ 
else 
inc=0 
document.body.background=processed[inc… 
} 

if (document.all||document.getElementById) 
window.onload=new Function('setInterval("slideback()",spee… 

</script> 

</head> 

</html>

如果您有任何建议，请让我知道。另外，我并不是最擅长编写代码，也没有关于JavaScript的线索，因此请解释做什么。

来源

2013-02-14 AJ Marshall

我宁愿使用的背景图像的DIV和有这方面的低的z-index值。然后只需使用jquery或任何其他库来浏览图片。这只是一个想法，虽然;） – itsols 2013-02-14 04:08:55

Working example on jsFiddle.

使用此代码来代替：（请注意，你需要以加载jQuery此代码工作）

HTML

<div class="fadein"> 
    <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg"> 
    <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg"> 
    <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg"> 
    <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg"> 
    <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg"> 
</div>

CSS

.fadein { 
    position:relative; 
    height:320px; 
    width:320px; 
} 

.fadein img { 
    position:absolute; 
    left:0; 
    top:0; 
}

JavaScript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
$('.fadein img:gt(0)').hide(); 

setInterval(function() { 
    $('.fadein :first-child').fadeOut() 
          .next('img') 
          .fadeIn() 
          .end() 
          .appendTo('.fadein'); 
}, 4000); // 4 seconds 
}); 
</script>

来源

2013-02-14 04:06:44

嘿谢谢，我甚至不知道如何赖特jQuery。 – 2013-02-14 05:22:08

所有你需要做的就是在你的HTML页面（在 2013-02-14 06:06:44

伟大的解决方案htmled！但有一个问题：我怎么能结合这与图像的动态宽度（100％）的工作？我尝试更新的jsfiddle，但随后的文本置于图像背后。见http://jsfiddle.net/2kkHH/340/ – Publicus 2013-10-21 12:55:19

-2

CSS的内部：

宽度：100％; 身高：100％; 职位：固定;

来源

2015-05-05 20:44:57 tkd

这不回答这个问题。 – Kmeixner 2015-05-05 21:05:58

如何使HTML/CSS幻灯片放映背景淡入淡出？

回答

相关问题