자바 스크립트로 간단한 슬라이드 쇼에 페이드 추가하기

이미지의 작은 슬라이드 쇼를 실행하고 변경할 때 페이드 효과를 추가하기 위해 사용하는 매우 간단한 코드가 있습니다. 나는 어떤 CSS 나 jquery도 사용할 수없고 그 둘을 포함하지 않는 것을 찾을 수 없다.자바 스크립트로 간단한 슬라이드 쇼에 페이드 추가하기

<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 요소를 렌더링 한 다음 zIndex를 전환하고 현재/다음 슬라이드의 불투명도를 애니메이션으로 만드는 것이 좋습니다.

출처

2014-04-22 18:46:25

내가 지금 여기에이 다른 질문에서 가져온 몇 가지 코드를 사용했습니다 : Math: Ease In, ease Out a displacement using Hermite curve with time constraint

을 제가했습니다 이후 5 애니메이션 보간 기능을 축소 된 그것은 확실히 덜 읽기 쉽다.

올바른 접근 방식은 올바른 이미지를 반영하도록 이미지 소스를 업데이트해야합니다.

기본적으로 우리는 50ms를 사용하여 500ms 동안 대상 요소를 페이드 아웃하는 함수를 호출합니다. 이것이 끝나면 이미지의 소스를 변경 한 다음 다시 페이드 인합니다. 이 작업이 완료되면 다시 시작하기 전에 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

자바 스크립트로 간단한 슬라이드 쇼에 페이드 추가하기

답변

관련 문제