Question

我有以下代码，用Javascript创建幻灯片。

HTML

<div id="buttons">
    <a href="#" id="prev">prev</a>
    <a href="#" id="next">next</a>
    <div class="clear"></div>
  </div>
<ul class="slider">
  <li>
    <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
  </li>
</ul>

Javascript

<script>

$(document).ready(function() {
  var $slider = $('.slider'); // class or id of carousel slider
  var $slide = 'li'; // could also use 'img' if you're not using a ul
  var $transition_time = 1000; // 1 second
  var $time_between_slides = 4000; // 4 seconds

  function slides(){
    return $slider.find($slide);
  }


  slides().fadeOut();

  // set active classes
  slides().first().addClass('active');
  slides().first().fadeIn($transition_time);

  // auto scroll 
  $interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
  );
});
</script>

此代码会自动滑过图像。

我正在尝试为其添加上一个和下一个按钮功能，以便用户可以手动翻阅图像。我想成为一个无限的旋转木马。

我如何使用淡入淡出，我现在拥有它？

$('#next').click(function() {

}

修改

我试过了：

<script>

$(document).ready(function() {
  var $slider = $('.slider'); // class or id of carousel slider
  var $slide = 'li'; // could also use 'img' if you're not using a ul
  var $transition_time = 1000; // 1 second
  var $time_between_slides = 4000; // 4 seconds

  function slides(){
    return $slider.find($slide);
  }

    $('.slider img:gt(0)').hide();

    $('#next').click(function() {
        $('.slider img:first-child').fadeOut().next().fadeIn().end().appendTo('.slider');
    });

    $('#prev').click(function() {
        $('.slider img:first-child').fadeOut();
        $('.slider img:last-child').prependTo('.slider').fadeOut();
        $('.slider img:first-child').fadeIn();
    });

  slides().fadeOut();

  // set active classes
  slides().first().addClass('active');
  slides().first().fadeIn($transition_time);

  // auto scroll 
  $interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
  );
});
</script>

现在手动按钮可以工作，但是在间隔上自动滚动幻灯片不再起作用，幻灯片只在单击按钮时才会改变。我如何保持以前的自动幻灯片功能？

Answer 1

尝试喜欢

$('.img-wrap img:gt(0)').hide();

$('.next').click(function() {
    $('.img-wrap img:first-child').fadeOut().next().fadeIn().end().appendTo('.img-wrap');
});

$('.prev').click(function() {
    $('.img-wrap img:first-child').fadeOut();
    $('.img-wrap img:last-child').prependTo('.img-wrap').fadeOut();
    $('.img-wrap img:first-child').fadeIn();
});

Demo

Answer 2

从间隔调用中取出匿名函数，并使其成为常规函数，以便next，prev和interval可以调用它，修改它以使用方向变量而不是硬编码值。这样就可以控制旋转木马与用户交互的方向。

如果3秒后没有用户交互（加上初始间隔时间），我添加了第二个计时器autoTurnTimer来重启自动转弯功能

var $interval, autoTurnTimer;
...
function turnCarousel(direction){
    var $i = $slider.find($slide + '.active').index();

    slides().eq($i).removeClass('active');
    slides().eq($i).fadeOut($transition_time);

    $i = $i+direction;
    if ($i >= slides().length  ) {
        $i = 0; // loop to start
    }else if($i<0){
        $i = slides().length-1; //loop to end
    }

    slides().eq($i).fadeIn($transition_time);
    slides().eq($i).addClass('active');
}
function startAutoTurn(){
    $interval = setInterval(
        turnCarousel.bind(null,1)
        , $transition_time +  $time_between_slides 
    );        
}
$("#next").click(function(){
    //Clears the timers so not to compete against
    //user interaction
    clearInterval($interval);
    clearTimeout(autoTurnTimer);
    turnCarousel(1);
    autoTurnTimer = setTimeout(startAutoTurn,3000);
});
$("#prev").click(function(){
    //Clears the timers so not to compete against
    //user interaction        
    clearInterval($interval);
    clearTimeout(autoTurnTimer);
    turnCarousel(-1);
    autoTurnTimer = setTimeout(startAutoTurn,3000);
});

请注意，您可以进一步重构，以便next和prev回调使用单个函数，并对其进行修改，以便自动转向继续沿上次使用的方向运行。

Demo

Javascript Image轮播上的手动控件（上一页和下一页）

2 个答案: