javascript - 使用 Jquery、javascript 和 css 自动播放图像 slider

Question

我已经使用 jQuery 和 javascript 创建了这个 slider ，但是我无法使用 outplay 和 next-previous 按钮使其工作。正如标题所说，我需要这个图像 slider ，你能帮我做左/右动画吗？

$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();    
$('.active').show();

$('.active').removeClass('active').addClass('oldActive');    
        if ( $('.oldActive').is(':last-child')) 
        {
            $('.sp').first().addClass('active');
        }
        else
        {
            $('.oldActive').next().addClass('active');
        }
    $('.oldActive').removeClass('oldActive');
    setTimeout('.active', 1000);
    $('.sp').fadeOut();
    $('.active').fadeIn();

代码的另一部分在 jsfiddle 链接中这是代码 https://jsfiddle.net/ghy14p0f/1/

Answer 1

制作幻灯片的最简单方法是包含 jquery-ui 模块，以实现效果和缓动。我在下面添加了它，并创建了转换。此外，在您的 fiddle 中，您实际上从未告诉它使用 jquery——所以是的，它永远不会工作。我实际上并没有改变太多，我编辑的唯一行是淡出/淡入以使它们过渡。祝你好运!!

$(document).ready(function() {
  $('.sp').first().addClass('active');
  $('.sp').hide();
  $('.active').show();


  $('#button-next').click(function() {
    $('.active')
      .removeClass('active')
      .addClass('oldActive');
    if ($('.oldActive').is(':last-child')) {
      $('.sp').first().addClass('active');
    } else {
      $('.oldActive').next().addClass('active');
    }
    $('.oldActive').hide("slide", { direction: "right" }, 600).removeClass('oldActive');
    $('.active').delay(400).show("slide", { direction: "left" }, 600);


  });

  $('#button-previous').click(function() {
    $('.active').removeClass('active').addClass('oldActive');
    if ($('.oldActive').is(':first-child')) {
      $('.sp').last().addClass('active');
    } else {
      $('.oldActive').prev().addClass('active');
    }
    $('.oldActive').hide("slide", { direction: "left" }, 600).removeClass('oldActive');
    $('.active').delay(400).show("slide", { direction: "right" }, 600);
  });




});

#slider-wrapper {
  width: 500px;
  height: 200px;
}

#slider {
  width: 500px;
  height: 200px;
  position: relative;
}

.sp {
  width: 500px;
  height: 200px;
  position: absolute;
}
img {
  height: 200px;
}

#nav {
  margin-top: 20px;
  width: 100%;
}

#button-previous {
  border: 1px dotted blue;
  background-color: #ccc;
  float: left;
}

#button-next {
  border: 1px dotted blue;
  background-color: #ccc;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="slider-wrapper">
  <div id="slider">
    <div class="sp">
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/32/Bianco_e_Rosso_(Croce)_e_Rosso.png">
      First Image
    </div>
    <div class="sp">
      <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/600px_Rosso_e_Giallo.PNG">
      Second Image
    </div>
    <div class="sp">
      <img src="https://upload.wikimedia.org/wikipedia/en/4/4c/Flag_of_Sweden.svg">
      Third Image
    </div>
  </div>

</div>

<div id="nav"></div>
<div id="button-previous">prev</div>
<div id="button-next">next</div>