Javascript图像旋转木马上的手动控件（上一个和下一个）_Javascript_Jquery_Html_Css

Javascript图像旋转木马上的手动控件（上一个和下一个）

javascript jquery html css

Javascript图像旋转木马上的手动控件（上一个和下一个）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,下面的代码使用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> <

下面的代码使用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>

编辑

我试过这个：

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


$（文档）.ready（函数（）{
var$slider=$（'.slider'）；//转盘滑块的类或id
var$slide='li'；//如果不使用ul，也可以使用'img'
var$transition\u time=1000；//1秒
var$time\u两张幻灯片之间的间隔=4000；//4秒
函数幻灯片（）{
返回$slider.find（$slide）；
}
$（'.slider img:gt（0）'）.hide（）；
$（“#下一步”）。单击（函数（）{
$（'.slider img:first child'）.fadeOut（）.next（）.fadeIn（）.end（）.appendTo（'.slider'）；
});
$（'#prev'）。单击（函数（）{
$（'.slider img:first child'）.fadeOut（）；
$（'.slider img:last child'）.prependTo（'.slider'）.fadeOut（）；
$（'.slider img:first child'）.fadeIn（）；
});
幻灯片（）；
//设置活动类
幻灯片（）.first（）.addClass（'active'）；
幻灯片（）.first（）.fadeIn（$transition\u time）；
//自动滚动
$interval=setInterval(
函数（）{
var$i=$slider.find（$slide+'.active'）.index（）；
slides（）.eq（$i）.removeClass（'active'）；
幻灯片（）；
如果（slides（）.length==$i+1）$i=-1；//循环开始
幻灯片（）.eq（$i+1）.fadeIn（$transition\u time）；
slides（）.eq（$i+1）.addClass（'active'）；
}
，$transition\u time+$time\u幻灯片之间的时间
);
});

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

试试看

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

将匿名函数从间隔调用中去掉，使其成为常规函数，以便next、prev和interval可以调用它，修改它以使用方向变量而不是硬编码的值。这将使我们能够控制旋转木马与用户交互的方向

我添加了第二个计时器，

autoturnitimer

，以在3秒后（加上初始间隔时间）没有用户交互时重新启动自动转弯功能

var$interval，自动翻转计时器；
...
功能转盘（方向）{
var$i=$slider.find（$slide+'.active'）.index（）；
slides（）.eq（$i）.removeClass（'active'）；
幻灯片（）；
$i=$i+方向；
如果（$i>=slides（）.length）{
$i=0；//要开始的循环
}我试过了，手动按钮也能用，但是现在自动幻灯片放映不能用了。
<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>

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

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