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

尝试

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

Answer 2

这个会循环播放，暂停悬停并允许您点击前进：

的 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

jQuery单击图像以显示下一个

2 个答案: