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

【问题标题】：Jquery slider next button not render next imageJquery滑块下一个按钮不呈现下一个图像
【发布时间】：2021-04-13 07:48:07
【问题描述】：

我总共有 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>

【问题讨论】：

    标签： javascript html jquery css jquery-ui


    【解决方案1】：

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

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

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

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

    就是这样。小提琴here

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

    【讨论】：

      【解决方案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

      【讨论】：

      • 也许把完整的代码放在答案中（不是链接的小提琴）作为一个 sn-p
      • 我不会更改其他文件中的任何内容。链接的小提琴不是答案，它类似于示例，演示文稿。
      【解决方案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 视为 Div 数组的一部分，我们可以以类似的方式简单地管理它。要移动到下一个或上一个，我们只需移动数组索引（+1 或 -1）或跳转到新索引。

      这是我的例子的基础。 jump() 只是执行淡入淡出到一个新项目，它不在乎，你只需给它索引和间隔。

      我调整了 sact() 以关注从头到尾的包装，反之亦然。所以现在我们可以点击一个点并发送它，或者我们 Next 或 Prev 并且一切正常。

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2020-05-30
        • 1970-01-01
        • 2013-12-12
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode