javascript 图像滑块带有Next和Prev幻灯片可见

Posted 2021-05-04

      /* Slider */
      var currentIndex = 0,
        items = $('.slider li'),
        toggle = $('.slider__toggles li'),
        itemAmt = items.length,
        prevItem = items.length,
        nextItem = 0;

      function cycleItems() {
        var item = $('.slider li').eq(currentIndex);
        var toggle = $('.slider__toggles li').eq(currentIndex);
        var nextItem = $('.slider li').eq(currentIndex + 1);
        
        var prevItem = $('.slider li').eq(currentIndex - 1);
        item.addClass('active');
        toggle.addClass('active');
        nextItem.addClass('next');
        prevItem.addClass('prev');

        
      }


      $('.arrow--right').on('click', function(event) {
        event.preventDefault();
        items.removeClass('active').removeClass('next').removeClass('prev');
        toggle.removeClass('active');
        currentIndex += 1;
        if (currentIndex > itemAmt - 1) {
          currentIndex = 0;
        }
        if (currentIndex > itemAmt - 2) {
          nextItem = $('.slider li[data-slide="01"]').addClass('next');
        }
        cycleItems();
      });

      $('.arrow--left').on('click', function(event) {
        event.preventDefault();
        items.removeClass('active').removeClass('next').removeClass('prev');
        toggle.removeClass('active');
        currentIndex -= 1;
        if (currentIndex < 0) {
          currentIndex = itemAmt - 1;
          nextItem = itemAmt;
        }
        if (currentIndex > itemAmt - 2) {
          nextItem = $('.slider li[data-slide="01"]').addClass('next');
        }
        cycleItems();
      });


      /* Toggles */
      $('.slider__toggles li').on('click', function(event){
        event.preventDefault();
        var slide = $(this).attr('data-slide');

        /* Remove class active */
        $('.slider__toggles li').removeClass('active');
        $('.slider li').removeClass('active').removeClass('next').removeClass('prev');

        /* Add class active to this toggle and the event that it is associated with */
        $(this).addClass('active');
        $('.slider li[data-slide='+slide+']').addClass('active');
        if ($('.slider li[data-slide="0'+itemAmt+'"]').hasClass('active')) {
          nextItem = $('.slider li[data-slide="01"]').addClass('next');
        }
        /* Change current index to this toggle/event */
        currentIndex = slide - 1;
        cycleItems();
      });