Question

我一直在使用data-src创建自定义javascript缩略图滑块。一切正常，只是下一个按钮和上一个按钮根本不起作用。任何帮助将不胜感激。

这是代码笔的链接

https://codepen.io/mandipluitel/pen/BbOXgZ

我正在使用此代码。

$(document).ready(function(e){
  $(".thumbnails li").click(function(e){
    var thisDataSrc = $(this).attr("data-src");
    var thisDataCount = $(this).children().attr("data-count");
    if(thisDataSrc == "undefined"){}
    else{
      $(this).siblings("li").removeClass("active");
      $(this).addClass("active");
      $(this).parents(".thumbnails").next().find("img").attr("src",thisDataSrc);
      $(this).parents(".thumbnails").next().find("span.number").html("" + thisDataCount + "");
    }
  });

  $("button.next").click(function(e) {
    var currentDiv = 0;

    var newDataSrc = $(this).parents(".slider-hold").prev().find(".active").attr("data-src");
    if(newDataSrc == "undefined"){}
    else{
      currentDiv = currentDiv .next();
      currentDiv.siblings("li").removeClass("active");
      currentDiv.addClass("active");
      currentDiv.parents(".thumbnails").next().find("img").attr("src",newDataSrc);
    }
  });
});

在这里帮助。

Answer 1

问题在于currentDiv设置为零。因此，当您稍后将其设置为currentDiv.next（）时，它实际上并没有执行任何操作。

我相信该功能应该以这样的方式开始：

$("button.next").click(function(e) {
    var currentLi = $("li.active");
    var nextLi = currentLi.next();
    if (nextLi) {
        nextLi.siblings("li").removeClass("active");
        nextLi.addClass("active");
        $("#large-image").attr("src",nextLi.attr("data-src"));
    }
});

自定义Javascript缩略图滑块

1 个答案: