javascript - 使用左右控件循环图像

Question

我是用 cycleImages 函数完成的，但我不知道如何完成另一半，即向左导航。尝试点击右键，看看效果。

function cycleImages(){
      var $active = $('#background_cycler .active');
      var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler img:first');
      $next.css('z-index',2);//move the next image up the pile
	  $active.fadeOut(800,function(){//fade out the top image
	  $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
      $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }



    $('.rightArrow').click(function(){
	   cycleImages();
	})

	$('.leftArrow').click(function(){
	   
	})

	#background_cycler{padding:0;margin:0;width:100%;top:0;z-index:-1;left:0;position:absolute;}
#background_cycler img{position:absolute;left:0;top:0;width:100%;z-index:1;background-size:cover;}
#background_cycler img.active{z-index:3}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background_cycler" >
	<img class="active" src="http://placehold.it/300&text=1" alt=""/>
	<img src="http://placehold.it/300&text=2" alt=""   />
	<img src="http://placehold.it/300&text=3" alt=""  />
	<img src="http://placehold.it/300&text=4" alt=""/>		
</div>

<button class="left">left</button>
<button class="rightArrow">right</button>

Answer 1

当你点击 Left 按钮时应用相同的逻辑，将参数传递给 cycleImages 函数说 direction，以确定点击了哪个按钮，如:

function cycleImages( direction ){
    var $active = $('#background_cycler .active'),
        $dir; //holds 'right' or 'left' direction
    if( "right" == direction) {
        $dir = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler img:first');
    }
    else {
        $dir = ($('#background_cycler .active').prev().length > 0) ?    $('#background_cycler .active').prev() : $('#background_cycler img:last');
    }
    $dir.css('z-index',2);
    $active.fadeOut(800,function(){
        $active.css('z-index',1).show().removeClass('active');
        $dir.css('z-index',3).addClass('active');
    });
}

$('.rightArrow').click(function(){
    cycleImages('right');
})

$('.leftArrow').click(function(){
   cycleImages('left');
})

html

. . .
<button class="leftArrow">left</button>
<button class="rightArrow">right</button>

演示 jsFiddle