setQuery fade function with setInterval function

-3

jQuery로 간단한 슬라이드를 만들고 그 코드를 아래 코드와 함께 사용하고 싶습니다. 나는 페이드 기능을 사용했다. 그러나 그것은 변화하는 동안 이미지가 희미 해지지 않는 것으로 작동하고있다.setQuery fade function with setInterval function

var mainImage = $('#mainImage'); 
var imageData = ['_images/gallery/beach_houses.jpg','_images/gallery/golden_gate.jpg','_images/gallery/red_rock_01.jpg']; 
var imageIndex = 0; 
function imageSlide(){ 
    mainImage.fadeIn("slow",function(){ 
     mainImage.attr("src",imageData[imageIndex]); 
     imageIndex++; 
     if(imageIndex >= imageData.length){ 
      imageIndex = 0; 
     } 
    }); 
} 
setInterval(imageSlide,1000);

출처

2017-11-20 Muhammad Hamza Nisar

예상되는 동작과 실제 동작을 지정하십시오. "나는 단지 페이드 기능을 사용하고 싶다"는 것은 당신이 성취하려는 것을 실제로 설명하지는 않는다. 이미'.fadeIn'을 사용하고있는 것 같습니다 (잘못 되었더라도). –

나는 페이드 기능을 사용하고 있지만 친절하게 작동하지 않아서 내 친구가 작동하지 않는 이유를 알려 주겠다. –

처음으로 imageSlide가 호출되면 *에 * 사라질 것입니다. 이미 표시되어 있다면 아무 것도하지 않습니다. 보이지 않더라도 이미지가 이미 표시된 후에 페이드 인하 고 * src *를 변경합니다. 이것을보십시오 :'mainImage.fadeOut ("slow", function() {$ (this) .attr ("src", imageData [imageIndex]); $ (this) .fadeIn ("slow")}'(imageindex 뿐만 아니라 수정) –

을 해냈어요합니다 의 이미지가 사라지게하려면을 숨겨야합니다. 가장 쉬운 방법은 을 먼저 퇴색시켜을 먼저 제거하는 것입니다. 페이드 아웃이 완료 될 때까지, 당신은 기다릴 수 페이드 아웃 콜백을 사용

는

다음 fadeIn SRC에 설정하고 :

var mainImage = $('#mainImage'); 
var imageData = ['_images/gallery/beach_houses.jpg','_images/gallery/golden_gate.jpg','_images/gallery/red_rock_01.jpg']; 
var imageIndex = 0; 
function imageSlide() { 

    // fade out before changing src 
    mainImage.fadeOut("fast", function(){ 
     mainImage.attr("src",imageData[imageIndex]); 
     imageIndex++; 
     if(imageIndex >= imageData.length){ 
      imageIndex = 0; 
     } 

     // fade back in after changing src 
     mainImage.fadeIn("slow"); 
    }); 
} 

// Increase interval to provide enough time if needed 
setInterval(imageSlide, 1000);

참고 "slow" = 600ms의 이상 될 것입니다 (에 다음 페이드 아웃) 그래서 배 느린 당신의 setInterval은 1000ms이고 약간의 미친 결과를 만들어 낼 것입니다.

출처

2017-11-20 10:09:17

확인은 여전히 거 가지고 생산을 목적으로 below.For 코드는 '폴란드어'당신은 순서대로 이미 fadeIn을 사용하지만, 한 행운

var mainImage = $('#mainImage'); 
 
var imageData = ['https://www.maxcdn.com/blog/blog-assets/2016/01/firefox-subresource-integrity-error.png','https://www.typesettercms.com/data/_addondata/x_Addons/screenshots/5/245/thumbnail.png','https://cdn9.gaborszathmari.me/wp-content/uploads/2016/06/when-the-cdn-goes-bananas-cover.png']; 
 
var imageIndex = 0; 
 
function imageSlide(){ 
 
    mainImage.attr("src",imageData[imageIndex]).fadeIn(1000,function(){ 
 
     imageIndex++; 
 
     if(imageIndex >= imageData.length){ 
 
      imageIndex = 0; 
 
     } 
 
     setTimeout(function(){ 
 
      mainImage.fadeOut(1000,function(){ 
 
       imageSlide(); 
 
      }); 
 
     },1000); 
 
    }); 
 
} 
 
imageSlide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img style="display:none;" id="mainImage">

출처

2017-11-20 10:05:18

내 코드를 참조하십시오 3 단계를 따르십시오, 이것이 당신을 도울 수 있기를 바랍니다!

당신은 사용 fadeIn 전에 mainImage을 숨길 필요가 당신은 대상 이미지 소스를 찾아 모든 데이터는이 단계

에서 이미지를 fadeIn 할 필요 왔을 때 mainImage

로 설정해야합니다

참고 : 배열의 마지막 항목 색인은 imageData.length - 1입니다. 여기서 imageIndex을 0으로 재설정하십시오.

var mainImage = $('#mainImage'); 
 
var imageData = ['http://www.vincenzo.net/isxkb/images/a/a9/Example.jpg','http://www.buzzlinestravel.co.uk/images/itinerary/1-1276781550ufzx.jpg','http://images.all-free-download.com/images/wallpapers_large/poppies_and_coreopsis_wallpaper_flowers_nature_wallpaper_1542.jpg']; 
 
var imageIndex = 0; 
 
function imageSlide(){ 
 
    //1. you need hide before use fadeIn 
 
    mainImage.hide(); 
 
    //2. you need find target source to show 
 
    mainImage.attr("src",imageData[imageIndex]); 
 
    imageIndex++; 
 
    if(imageIndex === imageData.length - 1){ 
 
     imageIndex = 0; 
 
    } 
 
    //3. the last step, you got all data needed, you can fadeIn your image here 
 
    mainImage.fadeIn("slow"); 
 
} 
 
setInterval(imageSlide,1000);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://code.jquery.com/jquery-2.0.3.js"></script><!DOCTYPE html> 
 
<html> 
 
</head> 
 

 
<body> 
 
    
 
<img src="" alt="" id="mainImage"> 
 

 
</body> 
 
</html>

출처

2017-11-20 10:11:49 Anph

setQuery fade function with setInterval function

답변

관련 문제