Slider

Question

一切尽在标题！除了 prev btn 上的错误外，一切正常...... 如果您有任何解决方案，请随时回复！

谢谢大家

$(function() {
var     timer;
function autoplay() { 
    $('.slideshow > li:gt(0)').hide();
    timer = setInterval(function() { 
         $('.slideshow > :first-child').fadeOut(500).next().fadeIn().end().appendTo('.slideshow');
    }, 5000);
}
autoplay();
$('#prev, #next').click(function() {
    switch (this.id) {
        case 'prev': {
            clearInterval(timer); autoplay();
            $('.slideshow > :last-child').fadeOut(500).prev().fadeIn().end().appendTo('.slideshow');
        }
            break;
        case 'next': {
            clearInterval(timer); autoplay();
            $('.slideshow > :first-child').fadeOut(500).next().fadeIn().end().appendTo('.slideshow');
        }
            break;
    }
 });
});

Answer 1

问题出在你的 css 上，它没有让你的箭头向右显示 add 这 css 使其正确 :

.arrows {
 max-width: 800px;
 position: absolute;
 width:100%;
 top:50%;
 -webkit-transform:translate(-50%);
 -ms-transform:translate(-50%);
 transform:translate(-50%);
 left:50%;
}

$(function() {
  var timer;

  function autoplay() {
    $('.slideshow > li:gt(0)').hide();
    timer = setInterval(function() {
      $('.slideshow > :first-child').fadeOut(500).next().fadeIn().end().appendTo('.slideshow');
    }, 5000);
  }
  autoplay();
  $('#prev, #next').click(function() {
    switch (this.id) {
      case 'prev':
        {
          clearInterval(timer);
          autoplay();
          $('.slideshow > :last-child').fadeOut(500).prev().fadeIn().end().appendTo('.slideshow');
        }
        break;
      case 'next':
        {
          clearInterval(timer);
          autoplay();
          $('.slideshow > :first-child').fadeOut(500).next().fadeIn().end().appendTo('.slideshow');
        }
        break;
    }
  });
});

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.slideshow {
  width: 800px;
  display: flex;
  align-items: center;
}

.item {
  position: absolute;
  padding: 0;
  margin: 0;
  list-style: none;
}

.item img {
  width: 800px;
}

.arrows {
  max-width: 800px;
  position: absolute;
  width:100%;
   top:50%;
  -webkit-transform:translate(-50%);
  -ms-transform:translate(-50%);
   transform:translate(-50%);
   left:50%;
}

.fa {
  font-size: 7.5em!important;
  transition: all .3s ease-in-out;
}

.fa.fa-angle-right {
  float: right;
}

.fa:hover {
  cursor: pointer;
  transform: scale(1.1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="slidecontainer">
<div class="slideshow">
  <li class="item active"><img src="img/1.jpg" alt=""></li>
  <li class="item"><img src="http://via.placeholder.com/800x600">1</li>
  <li class="item"><img src="http://via.placeholder.com/800x300"></li>
  <li class="item"><img src="http://via.placeholder.com/800x600"></li>
  <li class="item"><img src="http://via.placeholder.com/800x300"></li>
  <li class="item"><img src="http://via.placeholder.com/800x600"></li>
  <li class="item"><img src="http://via.placeholder.com/800x300"></li>
  <li class="item"><img src="http://via.placeholder.com/800x600"></li>
  <li class="item"><img src="http://via.placeholder.com/800x300"></li>
</div>
<div class="arrows">
  <span id="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
  <span id="next"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
</div>

Answer 2

为什么你的脚本不起作用？首先，您采用的方法基于解决方案，即画廊的第一个节点始终可见。因此，如果用户按下下一步按钮，脚本将获取幻灯片中的第一个 child：

$('.slideshow > :first-child')

（顺便说一句，你应该用无序列表 <ul></ul> 包装列表项 <li></li> 并调整一些 CSS）

然后隐藏它：fadeOut(500)，获取下一个节点，显示它并在末尾附加第一个（隐藏的）节点。现在让我们看看当用户按下 prev 按钮时脚本的外观：

$('.slideshow > :last-child').fadeOut(500).prev()

你拿最后一个节点，你淡出（但是已经淡了），你拿前一个节点（也就是最后一个之前的节点，也淡了）来显示，这是不对的。除了你正在淡出已经隐藏的节点这一事实之外，主要问题是：

节点是一个列表，有头有尾，这不是循环，所以prev()从第一个开始不是最后一个，next()从最后开始不是第一个。

我所做的是使用 CSS class“活动”并在用户按下 next/prev 按钮时将其打开和关闭。这样您就不需要在节点上进行操作并附加它们，而是切换 CSS class，这样速度更快。

我已设法在此处更正它（如我所写，这是一种略有不同的方法）： JSFiddle

除此之外，图库没有响应，但那是另一个话题。

Answer 3

终于找到解决办法了！完美运行

代码：

$(function() {
var     timer;
function autoplay() { 
    timer = setInterval(function() {
        $('.slideshow > :first-child').fadeOut().next().fadeIn().end().appendTo('.slideshow');
    }, 5000);
}
autoplay();
$('#prev, #next').click(function() {
    switch (this.id) {
        case 'prev':
            clearInterval(timer); autoplay(); 
            $('.slideshow > :first-child').fadeOut();
            $('.slideshow > :last-child').fadeIn().prependTo('.slideshow');
            break;
        case 'next':
            clearInterval(timer); autoplay();
            $('.slideshow > :first-child').fadeOut().next().fadeIn().end().appendTo('.slideshow');
            break;
    }});});

感谢支持

Slider - 为什么我的上一个按钮不起作用？

Slider - Why my prev button doesn't work?

jquery

animation

button

slideshow