0

我正在尝试显示 8 个图像，除了第一个之外，所有图像都隐藏在 css 的页面加载中。当您单击第一个时，它应该隐藏那个并显示下一个。等等等等。

我已经使用fadeIn()and进行了这项工作，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>
4

2 回答 2

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');
})
于 2013-05-01T03:20:09.717 回答
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
于 2013-05-01T03:31:55.370 回答