Jquery 滑块下一个按钮不呈现下一个图像

Question

我总共有 5 张图片，当我点击下一步时它会拍摄最后一张图片。例如，如果用户渲染第一张图像然后单击下一张，则它不会按顺序显示下一张图像，而是显示最后一张图像。如何解决这个问题？

注意：底部的点可以正常工作，但是当我尝试使用下一步按钮 (>) 时，它不起作用。我真的很难解决这个问题。

$(document).ready(function() {

  $("#slideshow > div:gt(0)").hide();

  var buttons = "<button class=\"slidebtn prev\"><i class=\"fa fa-chevron-circle-left\"></i></button><button class=\"slidebtn next\"><i class=\"fa fa-chevron-circle-right\"></i></button\>";

  var slidesl = $('.slideitem').length
  var d = "<li class=\"dot active-dot\">&bull;</li>";
  for (var i = 1; i < slidesl; i++) {
    d = d + "<li class=\"dot\">&bull;</li>";
  }
  var dots = "<ul class=\"slider-dots\">" + d + "</ul\>";

  $("#slideshow").append(dots).append(buttons);
  var interval = setInterval(slide, 10000);

  function intslide(func) {
    if (func == 'start') {
      interval = setInterval(slide, 10000);
    } else {
      clearInterval(interval);
    }
  }

  function slide() {
    sact('next', 1, 1200);
  }

  function sact(a, ix, it) {
    var currentSlide = $('.current');
    var nextSlide = currentSlide.next('.slideitem');
    var prevSlide = currentSlide.prev('.slideitem');
    var reqSlide = $('.slideitem').eq(ix);

    var currentDot = $('.active-dot');
    var nextDot = currentDot.next();
    var prevDot = currentDot.prev();
    var reqDot = $('.dot').eq(ix);

    if (nextSlide.length == 0) {
      nextDot = $('.dot').first();
      nextSlide = $('.slideitem').first();
    }

    if (prevSlide.length == 0) {
      prevDot = $('.dot').last();
      prevSlide = $('.slideitem').last();
    }

    if (a == 'next') {
      console.log('@@@@@ dta', nextSlide)
      var Slide = nextSlide;
      var Dot = nextDot;
    } else if (a == 'prev') {
      var Slide = prevSlide;
      var Dot = prevDot;
    } else {
      var Slide = reqSlide;
      var Dot = reqDot;
    }

    currentSlide.fadeOut(it).removeClass('current');
    Slide.fadeIn(it).addClass('current');

    currentDot.removeClass('active-dot');
    Dot.addClass('active-dot');
  }

  $('.next').on('click', function() {
    intslide('stop');
    sact('next', 0, 400);
    intslide('start');
  }); //next

  $('.prev').on('click', function() {
    intslide('stop');
    sact('prev', 0, 400);
    intslide('start');
  }); //prev

  $('.dot').on('click', function() {
    intslide('stop');
    var index = $(this).index();
    sact('dot', index, 400);
    intslide('start');
  }); //prev
  //slideshow
});

@media all and (min-width:769px) and (max-width: 800px) {
  #slideshow {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 105px !important;
    box-sizing: border-box;
  }
  .slidebtn i {
    color: #252525 !important;
    font-size: 31px !important;
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .slider-dots {
    top: 72% !important
  }
  .slider-dots li {
    color: #696969 !important;
  }
  .slider-dots li.active-dot {
    color: #252525 !important;
  }
}

@media all and (min-width:569px) and (max-width: 768px) {
  #slideshow {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 105px !important;
    box-sizing: border-box;
  }
  .slidebtn i {
    color: #252525 !important;
    font-size: 31px !important;
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .slider-dots {
    top: 72% !important
  }
  .slider-dots li {
    color: #696969 !important;
  }
  .slider-dots li.active-dot {
    color: #252525 !important;
  }
}

@media all and (min-width:481px) and (max-width: 568px) {
  #slideshow {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 105px !important;
    box-sizing: border-box;
  }
  .slidebtn i {
    color: #252525 !important;
    font-size: 31px !important;
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    7 -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .slider-dots {
    top: 72% !important
  }
  .slider-dots li {
    color: #696969 !important;
  }
  .slider-dots li.active-dot {
    color: #252525 !important;
  }
}

@media all and (min-width:321px) and (max-width: 480px) {
  #slideshow {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 105px !important;
    box-sizing: border-box;
  }
  .slidebtn i {
    color: #252525 !important;
    font-size: 31px !important;
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .slider-dots {
    top: 93% !important
  }
  .slider-dots li {
    color: #696969 !important;
  }
  .slider-dots li.active-dot {
    color: #252525 !important;
  }
}

@media all and (min-width:0px) and (max-width: 320px) {
  #slideshow {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 105px !important;
    box-sizing: border-box;
  }
  .slidebtn i {
    color: #252525 !important;
    font-size: 31px !important;
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .slider-dots {
    top: 87% !important
  }
  .slider-dots li {
    color: #696969 !important;
  }
  .slider-dots li.active-dot {
    color: #252525 !important;
  }
}

#slideshow {
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 430px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

#slideshow>div {
  position: absolute;
  top: 10px;
  bottom: 10px;
}

#slideshow>div>img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

#slideshow:hover i,
#slideshow:hover .slider-dots {
  opacity: 1;
}

.slidebtn {
  z-index: 99;
  background: transparent;
  outline: none;
  border: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.slidebtn:active,
.slidedtn:focus {
  outline: none;
}

.slidebtn i {
  color: #252525 !important;
  font-size: 31px;
  opacity: 0.2;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.prev {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
}

.next {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
}

.slider-dots {
  opacity: 0.2;
  list-style: none;
  display: inline-block;
  padding-left: 0;
  margin-bottom: 0;
  position: absolute;
  left: 50%;
  top: 109%;
  bottom: 3%;
  transform: translate(-50%, 0);
  z-index: 99;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.slider-dots li {
  color: #696969;
  display: inline;
  font-size: 38px;
  margin-right: 5px;
  cursor: pointer;
}

.slider-dots li.active-dot {
  color: #252525;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
  <div class="slideitem current">
    <a href="#">
      <img src="https://image.shutterstock.com/image-photo/large-beautiful-drops-transparent-rain-600w-668593321.jpg">
    </a>
  </div>
  <div class="slideitem current">
    <a href="#">
      <img src="https://image.shutterstock.com/image-photo/set-two-beautiful-blue-turquoise-600w-1856321857.jpg">
    </a>
  </div>
  <div class="slideitem current">
    <a href="#">
      <img src="https://image.shutterstock.com/image-photo/floral-spring-natural-blue-background-600w-1857077830.jpg">
    </a>
  </div>
  <div class="slideitem current">
    <a href="#">
      <img src="https://image.shutterstock.com/image-photo/green-grass-chamomile-flowers-nature-600w-247906417.jpg">
    </a>
  </div>

  <div class="slideitem current">
    <a href="#">
      <img src="https://image.shutterstock.com/image-photo/lovely-sunny-purple-color-blurred-260nw-404849365.jpg">
    </a>
  </div>
  <div class="slideitem current">
    <a href="#">
      <img src="https://image.shutterstock.com/image-photo/pink-blurred-background-260nw-1274874394.jpg">
    </a>
  </div>
  <div class="slideitem current">
    <a href="#">
      <img src="https://image.shutterstock.com/image-photo/raindrops-on-purple-surface-metal-260nw-235002136.jpg">
    </a>
  </div>

</div>

Answer 1

在您的 HTML 中，每个 slideitem 的开头都有 class current。作为第一步，从第二个元素中删除这个 class 直到结束：

$('.slideitem:gt(0)').removeClass('current');

在 next 和 prev 函数中你需要计算当前索引而不是传递 0:

var index  = $('.dot.active-dot').index();

就是这样。 Fiddlehere

$(function () {
  $("#slideshow > div:gt(0)").hide();

  var buttons = "<button class=\"slidebtn prev\"><i class=\"fa fa-chevron-circle-left\"></i></button><button class=\"slidebtn next\"><i class=\"fa fa-chevron-circle-right\"></i></button\>";

  var slidesl = $('.slideitem').length
  var d = "<li class=\"dot active-dot\">&bull;</li>";
  for (var i = 1; i < slidesl; i++) {
      d = d+"<li class=\"dot\">&bull;</li>";
  }
  var dots = "<ul class=\"slider-dots\">" + d + "</ul\>";

  $("#slideshow").append(dots).append(buttons);
  var interval = setInterval(slide, 10000);

  function intslide(func) {
      if (func == 'start') {
          interval = setInterval(slide, 10000);
      } else {
          clearInterval(interval);
      }
  }

  function slide() {
      sact('next', 1, 1200);
  }

  function sact(a, ix, it) {
      var currentSlide = $('.current');
      var nextSlide = currentSlide.next('.slideitem');
      var prevSlide = currentSlide.prev('.slideitem');
      var reqSlide = $('.slideitem').eq(ix);

      var currentDot = $('.active-dot');
      var nextDot = currentDot.next();
      var prevDot = currentDot.prev();
      var reqDot = $('.dot').eq(ix);

      if (nextSlide.length == 0) {
          nextDot = $('.dot').first();
          nextSlide = $('.slideitem').first();
      }

      if (prevSlide.length == 0) {
          prevDot = $('.dot').last();
          prevSlide = $('.slideitem').last();
      }

      if (a == 'next') {
          console.log('@@@@@ dta',nextSlide)
          var Slide = nextSlide;
          var Dot = nextDot;
      }
      else if (a == 'prev') {
          var Slide = prevSlide;
          var Dot = prevDot;
      }
      else {
          var Slide = reqSlide;
          var Dot = reqDot;
      }

      currentSlide.fadeOut(it).removeClass('current');
      Slide.fadeIn(it).addClass('current');

      currentDot.removeClass('active-dot');
      Dot.addClass('active-dot');
  }

  $('.next').on('click', function(){
      intslide('stop');
      var index  = $('.dot.active-dot').index();
      sact('next', index, 400);
      intslide('start');
  });//next

  $('.prev').on('click', function(){
      intslide('stop');
      var index  = $('.dot.active-dot').index();
      sact('prev', index, 400);
      intslide('start');
  });//prev

  $('.dot').on('click', function(){
      intslide('stop');
      var index  = $(this).index();
      sact('dot', index, 400);
      intslide('start');
  });//prev

  $('.slideitem:gt(0)').removeClass('current');

  //slideshow
});

@media all and (min-width:769px) and (max-width: 800px) {
  #slideshow {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height:105px !important;
    box-sizing:border-box;
  }
  .slidebtn i {
    color: #252525 !important;
    font-size: 31px !important;
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .slider-dots {
    top:72% !important
  }

  .slider-dots li {
    color :  #696969 !important;
  }
  .slider-dots li.active-dot {
    color: #252525 !important;
  }
}

@media all and (min-width:569px) and (max-width: 768px) {
  #slideshow {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height:105px !important;
    box-sizing:border-box;
  }
  .slidebtn i {
    color: #252525 !important;
    font-size: 31px !important;
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .slider-dots {
    top:72% !important
  }
  .slider-dots li {
    color :  #696969 !important;
  }
  .slider-dots li.active-dot {
    color: #252525 !important;
  }
}

@media all and (min-width:481px) and (max-width: 568px) {
  #slideshow {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height:105px !important;
    box-sizing:border-box;
  }
  .slidebtn i {
    color: #252525 !important;
    font-size: 31px !important;
    opacity: 0.2;
    -webkit-transition: all 0.3s;7
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .slider-dots {
    top:72% !important
  }
  .slider-dots li {
    color :  #696969 !important;
  }
  .slider-dots li.active-dot {
    color: #252525 !important;
  }
}

@media all and (min-width:321px) and (max-width: 480px) {
  #slideshow {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height:105px !important;
    box-sizing:border-box;
  }
  .slidebtn i {
    color: #252525 !important;
    font-size: 31px !important;
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .slider-dots {
    top:93% !important
  }
  .slider-dots li {
    color :  #696969 !important;
  }
  .slider-dots li.active-dot {
    color: #252525 !important ;
  }
}

@media all and (min-width:0px) and (max-width: 320px) {
  #slideshow {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height:105px !important;
    box-sizing:border-box;
  }
  .slidebtn i {
    color: #252525 !important;
    font-size: 31px !important;
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .slider-dots {
    top:87% !important
  }
  .slider-dots li {
    color :  #696969 !important;
  }
  .slider-dots li.active-dot {
    color: #252525 !important;
  }
}
#slideshow {
  margin: 0 auto;
  position: relative;
  width: 100%;
  height:430px;
  box-sizing:border-box;
  margin-bottom:20px;
}

#slideshow > div {
  position: absolute;
  top: 10px;
  bottom: 10px;
}

#slideshow > div > img {
  width:100%;
  height:100%;
  border-radius:20px;
}

#slideshow:hover i, #slideshow:hover .slider-dots{
  opacity: 1;
}

.slidebtn {
  z-index:99;
  background:transparent;
  outline:none;
  border:none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;

}

.slidebtn:active,
.slidedtn:focus {
  outline:none;}

.slidebtn i {
  color: #252525 !important;
  font-size:31px;
  opacity: 0.2;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;

}

.prev {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
}

.next {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
}


.slider-dots {
  opacity: 0.2;
  list-style: none;
  display: inline-block;
  padding-left: 0;
  margin-bottom: 0;
  position:absolute;
  left:50%;
  top:109%;
  bottom:3%;
  transform: translate(-50%, 0);
  z-index:99;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;

}

.slider-dots li {
  color: #696969;
  display: inline;
  font-size: 38px;
  margin-right: 5px;
  cursor:pointer;
}

.slider-dots li.active-dot {
  color: #252525;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
    <div class="slideitem current">
        <a href="#">
            <img src="https://image.shutterstock.com/image-photo/large-beautiful-drops-transparent-rain-600w-668593321.jpg">
        </a>
    </div>
    <div class="slideitem current">
        <a href="#">
            <img src="https://image.shutterstock.com/image-photo/set-two-beautiful-blue-turquoise-600w-1856321857.jpg">
        </a>
    </div>
    <div class="slideitem current">
        <a href="#">
            <img src="https://image.shutterstock.com/image-photo/floral-spring-natural-blue-background-600w-1857077830.jpg">
        </a>
    </div>
    <div class="slideitem current">
        <a href="#">
            <img src="https://image.shutterstock.com/image-photo/green-grass-chamomile-flowers-nature-600w-247906417.jpg">
        </a>
    </div>

    <div class="slideitem current">
        <a href="#">
            <img src="https://image.shutterstock.com/image-photo/lovely-sunny-purple-color-blurred-260nw-404849365.jpg">
        </a>
    </div>
    <div class="slideitem current">
        <a href="#">
            <img src="https://image.shutterstock.com/image-photo/pink-blurred-background-260nw-1274874394.jpg">
        </a>
    </div>
    <div class="slideitem current">
        <a href="#">
            <img src="https://image.shutterstock.com/image-photo/raindrops-on-purple-surface-metal-260nw-235002136.jpg">
        </a>
    </div>

</div>

Answer 2

我试过修复你的代码，但我做不到。确实，单击下一步按钮时出现错误。我可以向您推荐我的工作代码。新的js代码-


$(document).ready(function(){

$("#slideshow > div:gt(0)").hide();

var buttons = "<button class=\"slidebtn prev\"><</button><button class=\"slidebtn next\">></button\>";

var slidesl = $('.slideitem').length
var d = "<li class=\"dot active-dot\">&bull;</li>";
for (var i = 1; i < slidesl; i++) {
  d = d+"<li class=\"dot\">&bull;</li>";
}   
var dots = "<ul class=\"slider-dots\">" + d + "</ul\>";

$("#slideshow").append(dots).append(buttons);

var slideitem_count = $('.slideitem').length;

$(".slideitem").hide();
$(".slideitem:first-child").show();
var current_slide = 1;
$('.next').on('click', function(){
    current_slide++;
  if (current_slide == slideitem_count + 1)
    current_slide = 1;
  if (current_slide != 1)
    $(".slideitem:nth-child(" + (current_slide - 1) + ")").hide();
  else
    $(".slideitem:nth-child(" + (slideitem_count) + ")").hide();
  $(".slideitem:nth-child(" + current_slide + ")").show();
});//next

$('.prev').on('click', function(){
    current_slide--;
  if (current_slide == 0)
    current_slide = slideitem_count;
  if (current_slide != slideitem_count)
    $(".slideitem:nth-child(" + (current_slide + 1) + ")").hide();
  else
    $(".slideitem:nth-child(" + 1 + ")").hide();
  $(".slideitem:nth-child(" + current_slide + ")").show();          
});//prev

$('.dot').click(function(){
    var dot_index = $(this).index() + 1;
    $(".slideitem:nth-child(" + current_slide + ")").hide();
  $(".slideitem:nth-child(" + dot_index + ")").show();
  current_slide = dot_index;
});
//slideshow
});

工作样本 - js fiddle code

Answer 3

考虑以下示例。

$(function() {

  $("#slideshow > div:gt(0)").hide();

  var buttons = "<button class='slidebtn prev'><i class='fa fa-chevron-circle-left'></i></button><button class='slidebtn next'><i class='fa fa-chevron-circle-right'></i></button\>";

  var dots = $("<ul>", {
    class: "slider-dots"
  }).appendTo("#slideshow");

  $('.slideitem').each(function(i, el) {
    dots.append("<li class='dot'>&bull;</li>");
  });
  $(".dot:first", dots).addClass("active-dot");

  $("#slideshow").append(buttons);
  var interval = setInterval(slide, 10000);

  function intslide(f) {
    if (f == 'start') {
      interval = setInterval(slide, 10000);
    } else {
      clearInterval(interval);
    }
  }

  function slide() {
    if ($(".current").length) {
      sact($(".current").index() + 1, 1200);
    } else {
      sact(1, 1200);
    }
  }

  function jump(ix, it) {
    $(".current").fadeOut(it, function() {
      $(".current").removeClass("current");
      $(".active-dot").removeClass("active-dot");
    });
    $(".slideitem").eq(ix).fadeIn(it, function() {
      $(".slideitem").eq(ix).addClass("current");
      $(".dot").eq(ix).addClass("active-dot");
    })
  }

  function sact(ix, it) {
    if (ix > $(".slideitem").length - 1) {
      ix = 0;
    }
    if (ix < 0) {
      ix = $(".slideitem").length - 1;
    }
    jump(ix, it);
    intslide("start");
  }

  $('.slidebtn, .dot').on('click', function() {
    intslide('stop');
    var i = $(this).index();
    if ($(this).hasClass("next")) {
      i = $(".current").index() + 1;
    }
    if ($(this).hasClass("prev")) {
      i = $(".current").index() - 1;
    }
    sact(i, 400);
  });
});

@media all and (min-width:769px) and (max-width: 800px) {
  #slideshow {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 105px !important;
    box-sizing: border-box;
  }
  .slidebtn i {
    color: #252525 !important;
    font-size: 31px !important;
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .slider-dots {
    top: 72% !important
  }
  .slider-dots li {
    color: #696969 !important;
  }
  .slider-dots li.active-dot {
    color: #252525 !important;
  }
}

@media all and (min-width:569px) and (max-width: 768px) {
  #slideshow {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 105px !important;
    box-sizing: border-box;
  }
  .slidebtn i {
    color: #252525 !important;
    font-size: 31px !important;
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .slider-dots {
    top: 72% !important
  }
  .slider-dots li {
    color: #696969 !important;
  }
  .slider-dots li.active-dot {
    color: #252525 !important;
  }
}

@media all and (min-width:481px) and (max-width: 568px) {
  #slideshow {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 105px !important;
    box-sizing: border-box;
  }
  .slidebtn i {
    color: #252525 !important;
    font-size: 31px !important;
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    7 -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .slider-dots {
    top: 72% !important
  }
  .slider-dots li {
    color: #696969 !important;
  }
  .slider-dots li.active-dot {
    color: #252525 !important;
  }
}

@media all and (min-width:321px) and (max-width: 480px) {
  #slideshow {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 105px !important;
    box-sizing: border-box;
  }
  .slidebtn i {
    color: #252525 !important;
    font-size: 31px !important;
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .slider-dots {
    top: 93% !important
  }
  .slider-dots li {
    color: #696969 !important;
  }
  .slider-dots li.active-dot {
    color: #252525 !important;
  }
}

@media all and (min-width:0px) and (max-width: 320px) {
  #slideshow {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 105px !important;
    box-sizing: border-box;
  }
  .slidebtn i {
    color: #252525 !important;
    font-size: 31px !important;
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .slider-dots {
    top: 87% !important
  }
  .slider-dots li {
    color: #696969 !important;
  }
  .slider-dots li.active-dot {
    color: #252525 !important;
  }
}

#slideshow {
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 430px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

#slideshow>div {
  position: absolute;
  top: 10px;
  bottom: 10px;
}

#slideshow>div>img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

#slideshow:hover i,
#slideshow:hover .slider-dots {
  opacity: 1;
}

.slidebtn {
  z-index: 99;
  background: transparent;
  outline: none;
  border: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.slidebtn:active,
.slidedtn:focus {
  outline: none;
}

.slidebtn i {
  color: #252525 !important;
  font-size: 31px;
  opacity: 0.2;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.prev {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
}

.next {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
}

.slider-dots {
  opacity: 0.2;
  list-style: none;
  display: inline-block;
  padding-left: 0;
  margin-bottom: 0;
  position: absolute;
  left: 50%;
  top: 109%;
  bottom: 3%;
  transform: translate(-50%, 0);
  z-index: 99;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.slider-dots li {
  color: #696969;
  display: inline;
  font-size: 38px;
  margin-right: 5px;
  cursor: pointer;
}

.slider-dots li.active-dot {
  color: #252525;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
  <div class="slideitem current">
    <a href="#">
      <img src="https://image.shutterstock.com/image-photo/large-beautiful-drops-transparent-rain-600w-668593321.jpg">
    </a>
  </div>
  <div class="slideitem">
    <a href="#">
      <img src="https://image.shutterstock.com/image-photo/set-two-beautiful-blue-turquoise-600w-1856321857.jpg">
    </a>
  </div>
  <div class="slideitem">
    <a href="#">
      <img src="https://image.shutterstock.com/image-photo/floral-spring-natural-blue-background-600w-1857077830.jpg">
    </a>
  </div>
  <div class="slideitem">
    <a href="#">
      <img src="https://image.shutterstock.com/image-photo/green-grass-chamomile-flowers-nature-600w-247906417.jpg">
    </a>
  </div>
  <div class="slideitem">
    <a href="#">
      <img src="https://image.shutterstock.com/image-photo/lovely-sunny-purple-color-blurred-260nw-404849365.jpg">
    </a>
  </div>
  <div class="slideitem">
    <a href="#">
      <img src="https://image.shutterstock.com/image-photo/pink-blurred-background-260nw-1274874394.jpg">
    </a>
  </div>
  <div class="slideitem">
    <a href="#">
      <img src="https://image.shutterstock.com/image-photo/raindrops-on-purple-surface-metal-260nw-235002136.jpg">
    </a>
  </div>
</div>

我在控制台中看到一个大错误。我无法真正弄清楚错误是什么，但它是在最初的“下一个”调用之后直接发生的。

看了代码，感觉太复杂了。在我看来，我将每个 slideitem 视为 Divs 数组的一部分，我们可以用类似的方式简单地管理它。要移动到下一个或上一个，我们只需移动数组索引（+1 或 -1）或跳转到新索引。

这是我的示例的基础。 jump() 只是对一个新项目执行淡入淡出，它不关心，你只需要给它索引和间隔。

我调整了 sact() 以关注从头到尾的换行，反之亦然。所以现在我们可以点击一个点并发送它，或者我们下一个或上一个，这一切都有效。

Jquery 滑块下一个按钮不呈现下一个图像

Jquery slider next button not render next image

html

javascript

css

jquery

jquery-ui