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値が低い値を持っています。次に、jqueryなどのライブラリを使用してピクチャをスライドさせます。それは唯一のアイデアです;） – itsols

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

Cssの内部

<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をライトする方法も知らない。 –

あなたがする必要があるのは、上のコードのHTMLページ（の前の一番下にある）にそのJavaScriptブロックを含めることです。また、スタイルシートにCSSを追加してください。 –

素晴らしい解決策があります！ 1つの質問：これを組み合わせて画像の動的な幅（100％）で動作させるにはどうすればよいですか？ jsFiddleを更新しようとしましたが、テキストが画像の背後に配置されています。 http://jsfiddle.net/2kkHH/340/ – Publicus

-2

：

幅：100％。高さ：100％; 位置：固定;

出典

2015-05-05 20:44:57 tkd

これは質問に答えません。 – Kmeixner

HTML/CSSスライドショーの背景をフェードインする方法は？

答えて

関連する問題