具有自动播放和控制功能的轮播幻灯片

Question

尽我所能用简单的js构建自己的轮播/幻灯片。

1. 尝试删除当前view div 上的active 类，然后在下一个/上一个上添加active 类。但不知何故，它现在在接下来的两个 div 或 prev div 上，为什么？
2. 如何循环播放幻灯片？ （我的意思是在#1 div 上，点击prev，转到#3 div）
3. 我还想在下面添加一些控件点，如何使其与自动播放和点击控件相关？

谢谢！

$(document).ready(function(){
  $('.next').on('click', function(){
    $('.slider-inner > div.active').removeClass('active').css('z-index', -10);
    $('.slider-inner > div').next().addClass('active').css('z-index', 10);
  });

  $('.prev').on('click', function(){
    $('.slider-inner > div.active').removeClass('active').css('z-index', -10);
    $('.slider-inner > div').prev().addClass('active').css('z-index', 10);
  });

  setInterval(function() {
    $('.slider-inner > div:first')
    /*Set fadeout time here. Unite is millisecond.*/
      .fadeOut(1000)
      .next()
    /*Set fadein time here. Unite is millisecond.*/
      .fadeIn(1000)
      .end()
      .appendTo('.slider-inner');
    /*Set the fixed frame duration here. Unite is millisecond.*/
  },  3000);

});

.slider-outer{
	width:230px;
	margin:40px auto;
	overflow:auto;
}

.slider-inner{
	width:200px;
	height:200px;
	position:relative;
	overflow:hidden;
	float:left;
	padding:3px;
    background:#333;
    color:#fff;
}

.slider-inner > div{
	display:none;
	width:200px;
	height:200px;
}

.slider-inner .active{
	display:inline-block;
}

.prev,.next{
	float:left;
	margin-left:50px;
	cursor: pointer;
}

.carousel-dot > div{
    float: left;
    width: 30px;
    height: 8px;
    background-color: #D8D8D8;
    margin-right: 30px;
    margin-top: 50px;
}

.carousel-dot .active{
    background-color: #FF6600;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slider-outer">
<div class="slider-inner">
<div id="item" class="active"><p>#1</p></div>
<div id="item" ><p>#2</p></div>
<div id="item" ><p>#3</p></div>
</div>

<div class="carousel-controls">
<a class="prev" >prev</a>
<a class="next" >next</a>
</div>

<div class="carousel-dot">
          <div class="active"></div>
          <div></div>
          <div></div>
        </div>
        </div>

Answer 1

您在.next() 和.prev() 的点击处理程序中使用的选择器显得过于宽泛。

一般而言，对于此类组件，建议在元素集合中将当前和最大幻灯片位置作为数组索引或位置进行跟踪。

最终，您的逻辑将需要考虑第一张/最后一张幻灯片以及是否确实有下一张或上一张幻灯片可供展示。

希望这可以为您提供该方法的指示：

const slides = $(“.slider-inner .item”);
const max = slides.length;
let current = 0;

slides.eq(current).addClass(“active”);

围绕这一原则，您应该能够递增/递减 current 整数，然后根据需要向元素添加/删除 active 类。

希望对你有帮助。