使用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添加淡入幻灯片简单幻灯片

回答

相关问题