jquery 슬라이드 쇼 중지 버튼

Question

이 코드에서 간단한 중지 버튼을 어떻게 만들 수 있는지 알고 있습니까? 해당 코드로 가능합니까?

<div id="apDiv1"> 
    <ul id="exampleSlider"> 
    <li><img src="Images/A01.jpg" alt="" width="1049" height="768" /></li> 
    <li><img src="Images/A05.jpg" alt="" width="1049" height="768" /></li> 
    <li><img src="Images/A02.jpg" alt="" width="1049" height="768" /></li> 
    <li><img src="Images/A03.jpg" alt="" width="1049" height="768" /></li> 
    <li><img src="ImagesA04.jpg" alt="" width="1049" height="768" /></li> 
    </ul> 
</div> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

    $(function() { 

    /* SET PARAMETERS */ 
    var change_img_time  = 6000; 
    var transition_speed = 600; 

    var simple_slideshow = $("#exampleSlider"), 
     listItems   = simple_slideshow.children('li'), 
     listLen    = listItems.length, 
     i     = 0, 

     changeList = function() { 

      listItems.eq(i).fadeOut(transition_speed, function() { 
       i += 1; 
       if (i === listLen) { 
        i = 0; 
       } 
       listItems.eq(i).fadeIn(transition_speed); 
      }); 

     }; 

    listItems.not(':first').hide(); 
    setInterval(changeList, change_img_time); 

}); 

</script> 

Answer 1

jquery를 사용하여 다음 URL에서 샘플 데모를 만들려고했습니다.

그 통해 UR 요구에 따라 필요한 수정 사항을 확인하시기 바랍니다.

//To store timeout id 
var timeoutId; 

var slideImage = function(step) { 

    if (step == undefined) step = 1; 

    //Clear timeout if any 
    clearTimeout (timeoutId); 

    //Get current image's index 
    var indx = $('.item:visible').index('.item'); 

    //If step == 0, we don't need to do any fadein our fadeout 
    if (step != 0) { 
     //Fadeout this item 
     $('.item:visible').fadeOut(); 
    } 

    //Increment for next item 
    indx = indx + step ; 

    //Check bounds for next item 
    if (indx >= $('.item').length) { 
     indx = 0; 
    } else if (indx < 0) { 
     indx = $('.item').length - 1; 
    } 

    //If step == 0, we don't need to do any fadein our fadeout 
    if (step != 0) { 
     //Fadein next item 
     $('.item:eq(' + indx + ')').fadeIn(); 
    } 

    //Set Itmeout 
    timeoutId = setTimeout (slideImage, 5000); 
}; 

//Start sliding 
slideImage(0); 

//When clicked on prev 
$('#prev').click(function() { 

    //slideImage with step = -1 
    slideImage (-1); 
}); 

//When clicked on next 
$('#next').click(function() { 

    //slideImage with step = 1 
    slideImage (1); 
}); 

//When clicked on Pause 
$('#pause').click(function() { 

    //Clear timeout 
    clearTimeout (timeoutId);  

    //Hide Pause and show Play 
    $(this).hide(); 
    $('#play').show(); 
}); 

//When clicked on Play 
$('#play').click(function() { 

    //Start slide image 
    slideImage(0); 

    //Hide Play and show Pause 
    $(this).hide(); 
    $('#pause').show();  
});