如何在jQuery中实现以3为基数的加减循环 解决3页轮播计数器越界问题

核心逻辑 #

在每次修改当前页码current后增加边界判断，实现循环翻页效果：

• 点击下一张时，如果当前页码超过总张数total，重置为1
• 点击上一张时，如果当前页码小于1，重置为总张数total

修改后完整代码 #

$( document ).ready(function() {
  // 转成数字类型，避免data属性取到字符串导致运算异常
  var current =  Number($('.slider_number').data("hasso"));
  var total = Number($('.slider_number').data("total"));

  $('.slider_next').click(function(){
    ++current;
    // 下一张越界判断
    if (current > total) {
      current = 1;
    }
    console.log(current);
    $(".slider_number").text(current);
  });

  $('.slider_prev').click(function(){
    --current;
    // 上一张越界判断
    if (current < 1) {
      current = total;
    }
    console.log(current);
    // 补充原代码缺失的页码文本更新逻辑
    $(".slider_number").text(current);
  });
});

改动说明 #

• 对从data属性取到的current和total做了数值类型转换，避免字符串拼接类的异常
• 下一张点击逻辑中新增了最大值越界重置规则
• 上一张点击逻辑中新增了最小值越界重置规则，同时补充了原代码缺失的页码文本更新操作

内容的提问来源于stack exchange，提问作者Hasan Kawaai Pikachu