Question

尽力用简单的js构建自己的Carousel / Slideshow。

尝试删除当前view div上的 active 类，然后在下一个/上一个上添加 active 类。但是现在为什么会在下两个div或上一个div上执行，为什么？
如何循环播放幻灯片？ （我的意思是，在＃1 div上，单击prev，转到＃3 div）
我还想在下面添加一些控件，如何使其与自动播放相关并单击控件？

谢谢！

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

希望有帮助。

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

1 个答案: