时间戳

首页 > 解决方案 > Jquery滑块下一个按钮不呈现下一个图像

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

问题描述

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

标签： javascripthtmljquerycssjquery-ui

解决方案

在您的 HTML 中，每个幻灯片项的开头都有当前类。第一步从第二个元素中删除此类，直到结束：

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

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

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

就这样。在这里提琴

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

推荐阅读