添加淡出/淡入幻燈片

我一直在爲一個學校項目創建一個網站。除幻燈片外，我已經完成了大部分工作。我已經準備好了javascript，並且照片滑動正常，但是我想知道是否有辦法讓照片淡入淡出，並且我應該在代碼中放置「淡入淡出」功能？我相信它很容易，但不知道它添加淡出/淡入幻燈片

我看着另一個例子，我認爲這是與不透明度功能有關，但不知道把它放在這個項目中的位置？

下面是代碼：

<script type="text/javascript"> 

var slideimages = new Array() // create new array to preload images 
slideimages[0] = new Image() // create new instance of image object 
slideimages[0].src = "images/jambalaya.png" // set image object src property to an image's src, preloading that image in the process 
slideimages[1] = new Image() 
slideimages[1].src = "images/sucio_rice.png" 
</script> 
</head> 

<script type="text/javascript"> 

var step=0 

function slideit(){ 
if (!document.images) 
    return 
document.getElementById('slide').src = slideimages[step].src 
if (step<1) 
    step++ 
else 
    step=0 
//call function "slideit()" every 2.5 seconds 
setTimeout("slideit()",2500) 
} 

slideit() 

</script> 
</head> 

<body onLoad="MM_preloadImages('images/home_btn2.png')"> 

<div id="header"> 
    <h1> 
     <img src="images/crab_logo_edit.png" width="652" height="140" alt="Singing Crab" /> 
    </h1> 
</div> 

<div id="content" class="wrap_home"> 

<h2>Arriba!</h2> 

<div id="slideshow"> 
     <img src="images/jambalaya.png" id="slide" width="400" height="330" alt="Marsa Alam" /> 
</div> 

    <p>There's always a fiesta at The Singing Crab—The best Cajun food Louisiana has to offer! Heavy on the spices, The Singing Crab has        the absolute best that Cajun has to offer.</p> 

<h2>You'll love it. We just guarantee.</h2> 

<script type="text/javascript"> 

//variable that will increment through the images 
var step=0 

function slideit(){ 
//if browser does not support the image object, exit. 
if (!document.images) 
    return 
document.getElementById('slide').src = slideimages[step].src 
if (step<1) 
    step++ 
else 
    step=0 
//call function "slideit()" every 2.5 seconds 
setTimeout("slideit()",2500) 
} 

slideit() 

</script> 

</div>

來源

2014-10-31 Jason Cameron

你有可能準備jsFiddle你現在擁有什麼嗎？這將使我們更快地幫助你.. – 2014-11-05 08:37:17

嗯..沒得到，爲什麼你有2個slideIt()功能聲明，但無論如何，只是重寫此功能

function slideit(){ 
    if (!document.images) return; 
    $('#slide').fadeOut(150,function(){ 
     $('#slide').attr('src', slideimages[step].src); 
     $('#slide').fadeIn(150); 
    }); 
    step = step < 0 ? step++ : 0; 
} 
var intervalId = setInterval(slideIt, 2500);

這是jQuery解決方案比純js更短，更美麗。但是，你可以只用js和無庫使，只需添加這FUNC鍵，你的代碼

function fade(elem, time){ 
    var startOpacity = elem.style.opacity || 1; 
    elem.style.opacity = startOpacity; 

    (function go() { 
     elem.style.opacity -= startOpacity/(time/100); 
     elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')'; 

     if(elem.style.opacity > 0) 
      setTimeout(go, 100); 
     else 
      elem.style.display = 'none'; 
    })(); 
}

而且它操作而不是jQuery的fadeIn/fadeOut功能。你可以選擇每個，但我建議你jQuery。

來源

2014-10-31 23:00:51

因此，我把它放在那裏，它設置一切正常，但現在它不再滑動，它不喜歡「var intervalId」出於某種原因，編輯原始帖子中的代碼對於視覺 – 2014-11-05 01:12:03

Sry，是我的錯，將舊的intervalId更改爲現在的代碼。 – 2014-11-05 08:21:31

添加淡出/淡入幻燈片

回答

相關問題