jQuery 다음 이미지를 보려면 이미지를 클릭하십시오.

Question

8 개의 이미지를 표시하려고합니다. 첫 번째 것을 제외한 모든 페이지가 css로로드됩니다. 첫 번째 단추를 클릭하면 해당 단추를 숨기고 다음 단추를 표시해야합니다. 이렇게.

fadeIn()과 fadeOut()을 사용하고 있는데 타이머가 설정되어 있지만 단순히 페이드 인/아웃 이펙트를 클릭 기능으로 바꾸기를 원합니다.

어떻게해야할까요?

var journey_img = $('#the_journey_dialog img'); 

    function navigateImages() { 
     var current = journey_img.filter(".active"), next; 
     if (current.length == 0 || (next = current.next()).length == 0) { 
      next = journey_img.slice(0,1); 
     }    

    current.removeClass('active').fadeOut(400).promise().done(function(){ 
     next.addClass('active').fadeIn(); 
    }); 
    setTimeout(navigateImages,7*1000); 
    } 
    navigateImages(); 


<div id="the_journey_dialog"> 
    <img src="<?php echo site_url('/'); ?>wp-content/themes/twentytwelve-child/images/1.jpeg" border="0" /> 
    <img src="<?php echo site_url('/'); ?>wp-content/themes/twentytwelve-child/images/2.jpeg" border="0" /> 
    <img src="<?php echo site_url('/'); ?>wp-content/themes/twentytwelve-child/images/3.jpeg" border="0" /> 
    <img src="<?php echo site_url('/'); ?>wp-content/themes/twentytwelve-child/images/4.jpeg" border="0" /> 
    <img src="<?php echo site_url('/'); ?>wp-content/themes/twentytwelve-child/images/5.jpeg" border="0" /> 
    <img src="<?php echo site_url('/'); ?>wp-content/themes/twentytwelve-child/images/6.jpeg" border="0" /> 
    <img src="<?php echo site_url('/'); ?>wp-content/themes/twentytwelve-child/images/7.jpeg" border="0" /> 
    <img src="<?php echo site_url('/'); ?>wp-content/themes/twentytwelve-child/images/8.jpeg" border="0" /> 
</div> 

Answer 1

이 하나 개의 의지 루프를 시도 가져가 일시 중지하고 사전에 클릭에 당신을 허용 :

LIVE DEMO

var $dia = $('#the_journey_dialog'), 
    $img = $dia.find('img'), 
    c = 0, // CURRENT COUNTER 
    intv; 

function anim() { 
    $img.fadeTo(500,0).eq(++c%$img.length).stop().fadeTo(500,1); 
} 
function auto() { 
    intv = setInterval(anim,2000); 
} 

$img.eq(c).show(); 
auto(); 

// PAUSE ON HOVER 
$dia.hover(function(e) { 
    return e.type=="mouseenter" ? clearInterval(intv) : auto(); 
}).click(anim); // AND CLICK TO ADVANCE 

Answer 2

,

navigateImages.click(function(){ 
    var current = navigateImages.filter('.active'), next = current.next(); 
    if(!next.length){ 
     next = navigateImages.get(0); 
    } 

    current.hide().removeClass('active'); 
    next.show().addClass('active'); 
})