使用Javascript添加淡入幻燈片簡單幻燈片

我有一個非常簡單的代碼，用於運行圖像的小型幻燈片並希望在更改時添加淡入淡出效果。我無法使用任何css或jquery，也找不到那些不涉及這兩者的東西。使用Javascript添加淡入幻燈片簡單幻燈片

<script type="text/javascript"> 
<!-- 
var image1=new Image() 
image1.src="image1.jpg" 
var image2=new Image() 
image2.src="image2.jpg" 
var image3=new Image() 
image3.src="image3.jpg" 
//--> 
</script> 
<img src="image1.jpg" name="slide" width="300" height="269" /> 
<script> 
<!-- 
//variable that will increment through the images 
var step=1 
function slideit(){ 
//if browser does not support the image object, exit. 
if (!document.images) 
document.images.slide.src=eval("image1.src") 
document.images.slide.src=eval("image"+step+".src") 
if (step<3) 
step++ 
else 
step=1 
//call function "slideit()" every 2.5 seconds 
setTimeout("slideit()",3000) 
} 
slideit() 

//--> 
</script>

來源

2014-04-22 user3561637

當然，還有就是做這個的方法不止一種，但我灌輸了搗鼓雅在這裏：

JSFIDDLE

儘管此代碼可以使用一些清理，我選擇這樣處理問題：

var aImageURLs = [ 
    "http://fc00.deviantart.net/fs71/f/2012/329/5/0/wonderland___landscape_calendar__2_by_ivanandreevich-d4u0odw.jpg", 
    "http://www.wallanu.com/wp-content/uploads/2014/03/landscape-3-hd-wallpapers.jpg", 
    "http://davidpaulboaz.org/slides/Capitol%20Reef%20Landscape.jpg" 
]; 
var aImageObjects = []; 

// build out objects 
for (var i = 0; i < aImageURLs.length; i++) { 
    var o = new Image(); 
    o.src = aImageURLs[i]; 
    aImageObjects[i] = o; 
} 

var slideImage = document.images.slide; 
slideImage.currentSlide = 0; 

function slideIt(iSlideFrequency) { 
    function nextSlide() { 
     // identify next slide 
     slideImage.currentSlide++; 
     slideImage.currentSlide = (slideImage.currentSlide % aImageObjects.length); 
     // transition old slide out 
     setOpacity(slideImage, 0); 
     fadeOut(slideImage, 1000, function() { 
      // transition new slide in 
      slideImage.src = aImageObjects[slideImage.currentSlide].src; 
      fadeIn(slideImage, 1000, function() { 
       setTimeout(nextSlide, iSlideFrequency); 
      }); 
     }); 
    } 
    setTimeout(nextSlide, iSlideFrequency); 
} 

function fadeIn(oImg, iMillis, callback) { 
    var iTicks = 100; 
    var iWait = iMillis > iTicks ? Math.floor(iMillis/iTicks) : 0; 
    var iTick = 0; 
    var FadeMeIn = function(){ 
     var fOpacity = iTick/iTicks; 
     setOpacity(oImg, fOpacity); 
     iTick++; 
     if (iTick <= iTicks) { 
      setTimeout(FadeMeIn, iWait); 
     } 
     else { 
      try { callback(); } catch(Err) {} 
     } 
    } 
    FadeMeIn();  
} 
function fadeOut(oImg, iMillis, callback) { 
    var iTicks = 100; 
    var iWait = iMillis > iTicks ? Math.floor(iMillis/iTicks) : 0; 
    var iTick = 100; 
    var FadeMeOut = function(){ 
     var fOpacity = iTick/iTicks; 
     setOpacity(oImg, fOpacity); 
     iTick--; 
     if (iTick >= 0) { 
      setTimeout(FadeMeOut, iWait); 
     } 
     else { 
      try { callback(); } catch(Err) {} 
     } 
    } 
    FadeMeOut();  
} 

function setOpacity(oImg, fValue) { 
    // assume "real browser" values (decimals) 
    oImg.style.opacity = fValue; 
    // adjust for IE 
    var iValue = Math.ceil(fValue*100); 
    oImg.style.filter = "alpha(opacity=" + iValue + ")"; 
} 
slideIt(3000);

來源

2014-04-22 19:15:08

使用當前的代碼，淡入淡出不會工作，因爲它失去了它的高度和參考，當你切換SRC的。實際上最好是渲染img元素，然後切換zIndexes併爲當前/下一張幻燈片的不透明度製作動畫。

來源

2014-04-22 18:46:25

我用從這裏本的其他問題上的SO得出了一些代碼：Math: Ease In, ease Out a displacement using Hermite curve with time constraint

因爲我已經過壓縮5動畫插補功能，它肯定不容易閱讀。

下面是一個工作得很好的方法 - 確保您更新圖像源以反映有效圖像。

基本上，我們調用一個函數，它會在500ms內使用50個步驟淡出目標元素。完成此操作後，我們更改圖像的來源，然後再次將其淡入。一旦完成，我們設置3秒的超時時間，然後再重新開始。

<!DOCTYPE html> 
<html> 
<head> 
<script> 
///////////////////////////////////////////////////////////////////////////////////////////function cubicHermite(a,b,d,e,c){var g=a*a,f=g*a;return(2*f-3*g+1)*b+(f-2*g+a)*e+(-2*f+3*g)*d+(f-g)*c} 
function interp(a,b,d,e,c){var g,f;f=e/(a/2+b+d/2);g=f*a/2;f*=b;return result=c<=a?cubicHermite(c/a,0,g,0,f/b*a):c<=a+b?g+f*(c-a)/b:cubicHermite((c-a-b)/d,g+f,e,f/b*d,0)} 
function linear(a){return a} 
function cubic(a){return interp(0.35,0.3,0.35,1,a)} 
function doAnim(a,b,d,e){var c=a/b;setTimeout(function(){doAnimStep(0,b,c,d,e)},c)} 
function doAnimStep(a,b,d,e,c){a<=b?(setTimeout(function(){doAnimStep(a,b,d,e,c)},d),e(a/b),a++):void 0!=c&&null!=c&&c()} 
///////////////////////////////////////////////////////////////////////////////////////////function animFadeIn(elem, callback) 
{ 
    doAnim(250,20,function(raw){elem.style.opacity=cubic(raw)},callback); 
} 

function animFadeOut(elem, callback) 
{ 
    doAnim(500,50,function(raw){elem.style.opacity=1-cubic(raw)},callback); 
} 
/////////////////////////////////////////////////////////////////////////////////////////// 

window.addEventListener('load', onDocLoaded, false); 

function onDocLoaded() 
{ 
    slideChange(); 
} 

var imgNames = ["img/girl.png", "img/redbaron.png"]; 
var imgNum = 0; 

function slideChange() 
{ 
    animFadeOut(document.images.slide, afterSlideFadedOut); 

    function afterSlideFadedOut() 
    { 
     document.images.slide.src = imgNames[imgNum]; 
     imgNum++; 
     if (imgNum > imgNames.length-1) 
      imgNum=0; 
     animFadeIn(document.images.slide, afterSlideFadedIn); 
    } 

    function afterSlideFadedIn() 
    { 
     setTimeout(slideChange, 3000); 
    } 
} 
</script> 
</head> 
<body> 
    <img name="slide" width="300" height="269" /> 
</body> 
</html>

來源

2014-04-22 19:04:42 enhzflep

使用Javascript添加淡入幻燈片簡單幻燈片

回答

相關問題