用左右控件循环图像

Question

我是用循环图像功能完成的，但我不知道如何完成另一半，导航到左边。尝试单击右键并查看效果。

＆＃13;

＆＃13;

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(){
	   
	})

＆＃13;

	#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}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

单击“向左”按钮时应用相同的逻辑，将参数传递给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

Answer 2

尝试

HTML

<button class="prev">left</button>
<button class="next">right</button>

JS

function cycleImages(idx) {
  var $active = $("#background_cycler .active")
  , $next = $active[idx]().is("*") 
            ? $active[idx]() 
            : idx === "prev" 
              ? $active.siblings().eq($active.index("img") - 1) 
              : $active.siblings().addBack().eq(0);
  $next.css("z-index", 2); 
  $active.fadeOut(800, function() { 
    $active.css("z-index", 1).show().removeClass("active");        
    $next.css("z-index", 3).addClass("active"); 
  });
};

$("button").click(function(e) {
  cycleImages(e.target.className)
});

＆＃13;

＆＃13;

function cycleImages(idx) {
  var $active = $("#background_cycler .active")

  , $next = $active[idx]().is("*") 
            ? $active[idx]() 
            : idx === "prev" 
              ? $active.siblings().eq($active.index("img") - 1) 
              : $active.siblings().addBack().eq(0);

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

};

$("button").click(function(e) {
  cycleImages(e.target.className)
});

＆＃13;

#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
}

＆＃13;

<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="prev">left</button>
<button class="next">right</button>

＆＃13;

＆＃13;

＆＃13;