2013-05-01 190 views
0

我試圖顯示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> 
+0

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

回答

0

這人會循環,暫停懸停,讓你點擊推進:

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 
+0

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

+0

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

0

嘗試

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