Question

所有都在标题中！整个事情工作除了上一个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没有让你的箭头正确显示添加这个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

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

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

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

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

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

你拿最后一个节点，你淡出它（但它已经褪色），然后你取上一个节点（也就是最后一个节点，也是褪色）来显示它，这是错误的。除了事实，你已经褪色已经隐藏的节点，主要的问题是：

节点是一个列表，包含开头和结尾，这不是一个循环，因此第一个prev()不是最后一个，而{{1}从最后一次开始它不是第一次。

我做的是使用CSS类＆＃34;活跃＆＃34;并在用户按下下一个/上一个按钮时打开和关闭它。因此，您不需要在节点上进行操作并附加它们，但要切换CSS类，这样会更快。

我在这里设法纠正了它（正如我写的，它是一种略有不同的方法）： 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;
    }});});

感谢您的支持。

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

3 个答案: