确定 Javascript 中图像轮播的下一个正确移动

Determining next correct move for an image carousel in Javascript

本文关键字：下一个 移动 Javascript 图像 确定      更新时间：2023-09-26

我正在用Javascript制作一个圆形图像轮播。

它必须是圆形的，如果当前选择了 0 位置幻灯片并按下"上一个"，它将跳转到最后一个位置幻灯片。如果当前选择了最后一个位置幻灯片并按下"下一步"，它将跳转到 0 位置幻灯片。

另一个程序处理整个幻灯片，但我可以：

  • 用slide.current检测移位后的当前位置 - 第一个位置为 0
  • 使用slide.items.length检测幻灯片总数（在重新加载页面之前不会更改）
  • 在幻灯片程序完成自己的互补功能后，启动我自己的nextSlide和previousSlide函数
  • 使用幻灯片 API 中的slideTo()手动更改当前选定的幻灯片和指针位置
  • 自动知道页面加载后，第一张可见幻灯片是项目总数（3 到 n）除以 2，四舍五入

这是我所拥有的：

var currentSlide = slide.current;
var lastSlide = 'undefined';
function nextSlide(){
    currentSlide = slide.current;
    if(lastSlide == 'undefined'){
        lastSlide = currentSlide - 1;
    } else if (lastSlide == 0) {
        lastSlide = currentSlide;
    } else{
        lastSlide = lastSlide + 1;
    }
    if (lastSlide == currentSlide) {
        slide.activate(0);
    }
}
function previousSlide(){
    currentSlide = slide.current;
    if(lastSlide == 'undefined'){
        lastSlide = currentSlide + 1;
    } else if (lastSlide == slide.items.length - 1) {
        lastSlide = currentSlide;
    } else{
        lastSlide = lastSlide - 1;
    }
    if (lastSlide == currentSlide) {
        slide.activate(sly.items.length - 1);
    }
}

当您混合previousSlide呼叫和nextSlide呼叫时，此操作将失败。lastSlide变量变得不正确。

  • 没有必要将 lastSlide 的值声明为"未定义"。如果在未赋值的情况下声明变量，则默认情况下它将变为未定义状态。

  • 鉴于幻灯片充当对象，则 nextSlide 和 previousSlide 充当方法而不是独立函数更有意义。

  • 最后幻灯片值应取决于当前幻灯片的值。

  • 应使用严格的比较运算符，以避免将来出现类型混乱。（=== 而不是 ==）

相关文章：