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

Posted

技术标签:

【中文标题】Jquery滑块下一个按钮不呈现下一个图像【英文标题】：Jquery slider next button not render next image 【发布时间】：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>

【问题讨论】：

【参考方案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 并且一切正常。

【讨论】：

以上是关于Jquery滑块下一个按钮不呈现下一个图像的主要内容，如果未能解决你的问题，请参考以下文章

使用动画构建 jQuery 图像滑块

光滑的滑块下一个箭头不显示

jQuery图像滑块故障

jquery ui双图像滑块单命令

jQuery滑块：颜色更改菜单不会与滑块的其余部分同步

jQuery 滑块 - 上一期和下一期