슬라이드 쇼에 FadeOut/FadeIn 추가

학교 프로젝트를위한 사이트를 만들고 있습니다. 나는 슬라이드 쇼를 제외하고는 모든 것을 거의 끝내었다. 나는 자바 스크립트를 가지고 있으며 사진은 잘 움직이고 있습니다.하지만 사진을 페이드 인 및 페이드 아웃하는 방법이 있고 코드에 "페이드"기능을 넣어야하는 곳이 있는지 알고 싶었습니다. 나는 그것의 꽤 쉽다라고 확신한다. 그러나 그것을 이해할 수 없다.슬라이드 쇼에 FadeOut/FadeIn 추가

나는 다른 예를 보았다. 그리고 나는 그것이 opacity 특징과 함께 할 ahs와 생각한다. 그러나이 프로젝트에 그것을 어디에 넣어야하는지 명확히하지 않는다? 당신이 2 개 slideIt() 기능 선언이 왜하지 않았다 ..

<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을 준비 할 수 있습니까? 그게 우리가 빨리 당신을 도울 것입니다 .. –

음,하지만 어떤 식 으로든, 그냥

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보다 훨씬 더 짧고 훨씬 더 아름답습니다. 그러나 당신은 당신의 코드

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'; 
    })(); 
}

이 FUNC를 추가하고 fadeIn/fadeOut 기능을 함께 조작 대신에 jQuery를 만 JS없이 libs와 함께 할 수 있습니다. 각각 선택할 수 있지만 jQuery에 조언합니다.

출처

2014-10-31 23:00:51

그래서 내가 거기에 넣어 모든 괜찮아요,하지만 지금은 더 이상 미끄러 져 그것은 "var intervalId"를 좋아하지 않아 어떤 이유로, 원래 게시물 코드를 편집 시각적 인 –

를 위해 Sry는, 나의 실수이었다, 이전의 intervalId를 변경하는 것은 지금 코드에있다. –

슬라이드 쇼에 FadeOut/FadeIn 추가

답변

관련 문제