Question

我用jQuery和javascript创建了这个滑块，但是我无法使用outplay和next-previous按钮来完成这个工作。我需要这个用于图像的滑块作为标题说，你能用左/右侧动画帮我吗？

$(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模块，以实现效果和缓和。我在下面添加了它，并创建了转换。另外，在你的小提琴中，你从来没有真正告诉它使用jquery - 所以是的，它永远不会工作。我实际上没有太多改变，我编辑的唯一线条是fadeout / fadein使它们转换。祝你好运!!

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

使用Jquery，javascript和css自动播放图像滑块

1 个答案: