Jquery 简单的无限循环滑块逻辑

Question

我是 Jquery 的新手，正在制作一个简单的静态滑块，其中包含五个具有相同 class 名称的图像 (.sl_thumb) 这是下一个和上一个锚点的代码—— 右锚 (.right_nav_link), 左锚 (.left_nav_link) 幻灯片的主要 Div(.slide_container)

我的上一个和下一个链接工作正常，但是当滑块到达最后一张幻灯片时它停止了，我正在尝试制作无限循环滑块，以便它应该再次到达最后一张幻灯片后的第一张幻灯片。作为初学者，我尝试了很多东西但很困惑，我能使用的最佳逻辑是什么。

$(document).ready(function () {
    var src = 'img/img1.jpg';
    $(".right_nav_link").click(function () {
        var next = false;
        $($("img").filter(".sl_thumb")).each(function (key, value) {
            if ($(this).attr('src') == src) {
                next = true;
            } else if (next) {
                next = false;
                src = $(this).attr('src');
                $(".slide_container").css('background-image', 'url(' + src + ')');
                return;
            }
        });
    });
$(".left_nav_link").click(function () {
        var prev = false;
        $($("img").filter(".sl_thumb").get().reverse()).each(function (key, value) {
            // console.log(key,value);
            if ($(this).attr('src') == src) {   
                prev = true;
            } else if (prev) {
                prev = false;
                src = $(this).attr('src');
                $(".slide_container").css('background-image', 'url(' + src + ')');
                return;
            }
        });
    });
});

Answer 1

$( document ).ready(function() {
  var src = 'img/img1.jpg';
  
  function adjustSlideContainer ( adjustPositionAmount ) {
    //get all the images
    var $thumbnails = $( 'img.sl_thumb' );
    //find the current one shown
    var $current = $thumbnails.filter( '[src="'+ src +'"]' );
    //get its index
    var currentIndex = $thumbnails.index( $current );
    //adjust the index to the image that should be shown next
    var nextIndex = currentIndex + adjustPositionAmount;
    
    if ( nextIndex < 0 ) {
      //if it's before the first one, wrap to the last one
      nextIndex = $thumbnails.length - 1;
    } else if ( nextIndex >= $thumbnails.length ) {
      //if it's after the end one, wrap to the first one
      nextIndex = 0;
    }
    
    src = $thumbnails.eq( nextIndex ).attr( 'src' );
    $( '.slide_container' ).css( 'background-image', 'url(' + src + ')' );
  }
  
  $(".right_nav_link").click(function() {
    //go to the next image
    adjustSlideContainer( 1 );
  });
  
  $(".left_nav_link").click(function() {
    //go to the previous image
    adjustSlideContainer( -1 );
  });
});

Jquery 简单的无限循环滑块逻辑

Jquery simple infinite loop slider logic

jquery

slider

logic

infinite-scroll

jquery-ui-slider