使用Javascript（不是JQuery）淡入和淡出動畫

我正在嘗試使圖像淡入淡出的圖像庫。它在大多數情況下都能正常工作，但它確實存在這種奇怪的現象，即循環永遠留在元素上，從而使其閃爍不可思議。我覺得這個邏輯很好，但是我忽略了一些東西可以成功地停下來。使用Javascript（不是JQuery）淡入和淡出動畫

var d = document; 
var images = new Array(); 
function rotate(id,delay) 
{ 
    var obj = d.getElementById(id); 
    var imageCell = images.length; 
    images[imageCell] = obj.children; 
    if(images[imageCell].length < 1) 
     return 0; 
    var gs = images[imageCell].length; 
    var srcs = new Array(); 
    var rng = 0; 
    var ln = -1; 
    var curImg; 
    for(var i = 1; i < gs; i++) 
    { 
      images[imageCell][i].style.opacity=0; 
    } 
    fadeOut(obj,curImg,imageCell,rng,ln,gs,delay); 
} 
function fadeOut(obj,curImg,imageCell,rng,ln,gs,delay) 
{ 
    setTimeout 
    (
     function() 
     { 
      devanimate(images[imageCell][rng],"opacity",250,1,0); 
      ln = rng; 
      do 
      { 
       rng = Math.floor(Math.random() * gs); 
      }while(ln == rng); 
      nextImage(obj,curImg,imageCell,rng,ln,gs,delay); 
     }, 
     delay 
    ); 
} 
function nextImage(obj,curImg,imageCell,rng,ln,gs,delay) 
{ 
      images[imageCell][rng].style.left= (obj.clientWidth/2 - images[imageCell][rng].clientWidth/2)+"px";    
      devanimate(images[imageCell][rng],"opacity",250,0,1); 
      fadeOut(obj,curImg,imageCell,rng,ln,gs,delay); 
} 
function devanimate(obj,cssStyle,time,a,b) 
{ 
    if(typeof obj === 'undefined') return; 
    var frame = 24; 
    var second = 1000; 
    var fps = (second/frame); 
    var distance = parseInt(b) - parseInt(a); 
    var rate = ((distance/frame)*second)/time; 
    setTimeout 
    (
     function() 
     { 
      a += rate; 
        obj.style.opacity=a; 
      newTime = time-fps; 
      devanimate(obj,cssStyle,newTime,a,b); 
     } 
     ,fps 
    ); 
    if((parseInt(a) >= parseInt(b) && distance >= 0) || (parseInt(a) <= parseInt(b) && distance < 0)) 
     obj.style.opacity=b; 
    return; 
}

編輯：

我想通了。這是HTML的工作代碼。

<div id="fpImage" class="border gallery" style="padding:0px;"> 
    <img src="images/g20.jpg" alt=""/> 
    <img src="images/g1.jpg" alt=""/> 
    <img src="images/g2.jpg" alt=""/> 
    <img src="images/g3.jpg" alt=""/> 
    <img src="images/g4.jpg" alt=""/> 
    <img src="images/g5.jpg" alt=""/> 
    <img src="images/g6.jpg" alt=""/> 
    <img src="images/g7.jpg" alt=""/> 
    <img src="images/g8.jpg" alt=""/> 
    <img src="images/g9.jpg" alt=""/> 
    <img src="images/g10.jpg" alt=""/> 
    <img src="images/g11.jpg" alt=""/> 
    <img src="images/g12.jpg" alt=""/> 
    <img src="images/g13.jpg" alt=""/> 
    <img src="images/g14.jpg" alt=""/> 
    <img src="images/g15.jpg" alt=""/> 
    <img src="images/g16.jpg" alt=""/> 
    <img src="images/g18.jpg" alt=""/> 
    <img src="images/g19.jpg" alt=""/> 
    <img src="images/g17.jpg" alt=""/> 
</div> 
<script type="text/javascript"> 
    rotate("fpImage",3000); 
</script> 

var d = document; 
var images = new Array();//Set Array so you can have multiple galleries on a page at a time 
function rotate(id,delay) 
{ 
    var obj = d.getElementById(id); 
    var imageCell = images.length; 
    images[imageCell] = obj.children;//set specific gallery into images array 
    if(images[imageCell].length < 1) 
     return 0; 
    var gs = images[imageCell].length; 
    var rng = 0;//Initialize rng 
    var ln = -1;//initialize Last Number. This is used so the rng doesn't bring hte same number twice in a row 
    setTimeout//This set Timeout centers each image horizontally. 
    (
     function() 
     { 
      for(var i = 0; i < gs; i++) 
       images[imageCell][i].style.left= (obj.clientWidth/2 - images[imageCell][i].clientWidth/2)+"px"; 
     },delay 
    ); 
    for(var i = 1; i < gs; i++)//this makes all the images initially 100% transparent 
    { 
     images[imageCell][i].style.opacity=0; 
     images[imageCell][i].style.filter='alpha(opacity=0)'; 
    } 
    nextImage(imageCell,rng,ln,gs,delay); 
} 
function nextImage(imageCell,rng,ln,gs,delay) 
{ 
    setTimeout 
    (
     function() 
     { 
      devanimate(images[imageCell][rng],250,100,0);//Fade out current image 
      ln = rng;//Remember previous RNG Number 
      do 
      { 
       rng = Math.floor(Math.random() * gs);// 
      }while(ln == rng);//Loop until new RNG Number is found 
      devanimate(images[imageCell][rng],250,0,100);//Fade in new image 
      nextImage(imageCell,rng,ln,gs,delay);//call this function again 
     }, 
     delay 
    ); 
} 
function devanimate(obj,time,a,b) 
{ 
    var frame = 30;//FPS Rate, so this is currently set to 30 fps 
    var second = 1000; 
    var fps = (second/frame); 
    var distance = parseInt(b) - parseInt(a); 
    var rate = ((distance/frame)*second)/time; 
    setTimeout 
    (
     function() 
     { 
      a += rate; 
      obj.style.opacity=(a/100); 
      obj.style.filter='alpha(opacity='+a+')'; 
      newTime = time-fps; 
      if((parseInt(a) >= parseInt(b) && distance >= 0) || (parseInt(a) <= parseInt(b) && distance < 0)) 
      { 
       obj.style.opacity=(b/100); 
       obj.style.filter='alpha(opacity='+b+')'; 
      } 
      else 
       devanimate(obj,newTime,a,b); 
     } 
     ,fps 
    ); 
}

來源

2014-04-06 Devenator

你可以粘貼到您的html的例子呢？如果可以的話，也可以有一個[fiddle]（http://jsfiddle.net/）。 –

是的，你可以分享jsfiddle鏈接 – napender

http://jsfiddle.net/ –