jQuery點擊圖片顯示下一個

我試圖顯示8個圖像，所有隱藏在頁面加載的CSS除了第一個。當你點擊第一個時，它應該隱藏那個並顯示下一個。等等等等。jQuery點擊圖片顯示下一個

我有這個工作使用fadeIn()和它設置爲一個計時器，但我想用點擊功能簡單地替換淡入/淡出效果。

我該怎麼做呢？

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>

來源

2013-05-01 Trevan Hetzel

等等點擊你不想淡入/淡出效果 – 2013-05-01 03:15:31

這人會循環，暫停懸停，讓你點擊推進：

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

來源

2013-05-01 03:31:55

哇，太棒了！我不需要它淡入淡出，甚至無法自動播放。所以你越來越超越:)我將如何簡化這一點，並刪除動畫和間隔？ – 2013-05-01 08:26:39

我沒有讀你的評論，因爲我沒有通知，對不起...希望你解決了這一個！所有你需要的是去掉不需要的東西，比如auto（）和hover（），只有'$ dia.click（anim）;' – 2014-02-03 20:13:50

嘗試

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

來源

2013-05-01 03:20:09

jQuery點擊圖片顯示下一個

回答

相關問題