0

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>
4

2 に答える 2

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 に答える
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 に答える