Javascript 如何在第一张幻灯片中添加一个按钮以加载下一张幻灯片？

我有一个使用html/css/JS的幻灯片。 我想在第一张幻灯片上有一个按钮，它将触发第二张幻灯片的显示。我不知道该怎么办

html:

---

一种方法是使用

.flex\uu容器

div元素上的

[slide]

数据属性将幻灯片放映向前推进一步。你可以：

通过选择class

.flex--active

将

[slide]

属性编号增加1（使幻灯片向前移动1

检查

[slide]

属性编号是否未超过幻灯片总数，如果超过，请将其重置回起始幻灯片

在代码中，这可能看起来像：

$('.next').on('click', function(e) {
  e.preventDefault();

  /*
  Extract current slide index and compute next index
  */
  var current = $('.flex--active').data('slide');
  var next = parseInt(current) + 1;

  /*
  Query next slide element from next slide index just computed
  */
  var nextSlide = $('.slider__warpper')
  .find('.flex__container[data-slide=' + next + ']');

  /*
  If the next slide does not exist, set it to the first slide (ie if
  we've gone outside the range of slides, go back to beginning)
  */
  if( nextSlide.length === 0 ) {
    nextSlide = $('.slider__warpper').find('.flex__container[data-slide=1]')    
  };

  /*
  Cause slide nav to be in sync with navigation to next 
  */
  $('.slide-nav').removeClass('active');
  $('.slide-nav', '.slider__navi').eq(next - 1).addClass('active');

  /*
  Use same transition/animation logic as in other navigation handler
  */
  nextSlide.addClass('flex--preStart');
  $('.flex--active').addClass('animate--end');

  setTimeout(function() {

    $('.flex--preStart')
    .removeClass('animate--start flex--preStart')
    .addClass('flex--active');

    $('.animate--end')
    .addClass('animate--start')
    .removeClass('animate--end flex--active');

  }, 800); 
});

---

还有一个-希望有帮助！

是的！！太好了，这正是我想要的谢谢！@EmilyMcMullin不客气-很高兴我能帮忙：-）

.down {
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 }
i {
 border: solid black;
 border-width: 0 3px 3px 0;
 display: inline-block;
 padding: 3px;
 }

$('.next').on('click', function(e) {
  e.preventDefault();

  /*
  Extract current slide index and compute next index
  */
  var current = $('.flex--active').data('slide');
  var next = parseInt(current) + 1;

  /*
  Query next slide element from next slide index just computed
  */
  var nextSlide = $('.slider__warpper')
  .find('.flex__container[data-slide=' + next + ']');

  /*
  If the next slide does not exist, set it to the first slide (ie if
  we've gone outside the range of slides, go back to beginning)
  */
  if( nextSlide.length === 0 ) {
    nextSlide = $('.slider__warpper').find('.flex__container[data-slide=1]')    
  };

  /*
  Cause slide nav to be in sync with navigation to next 
  */
  $('.slide-nav').removeClass('active');
  $('.slide-nav', '.slider__navi').eq(next - 1).addClass('active');

  /*
  Use same transition/animation logic as in other navigation handler
  */
  nextSlide.addClass('flex--preStart');
  $('.flex--active').addClass('animate--end');

  setTimeout(function() {

    $('.flex--preStart')
    .removeClass('animate--start flex--preStart')
    .addClass('flex--active');

    $('.animate--end')
    .addClass('animate--start')
    .removeClass('animate--end flex--active');

  }, 800); 
});