javascript - 循环轮播中的 Jssor playTo()

标签 javascript jssor

我对 Jssor 的 playTo() 方法有一个简单的问题。我有一个循环播放多个图像的轮播。我使用 playTo() 方法,以便将单击的图像移动到轮播的中心。

但是这有一个问题。当从“新批处理”图像(即最后一张图像之后的图像,当循环再次开始时)中单击图像时,轮播将倒带而不是选择最短路线。

例如,我单击右侧的一个图像(实际上是循环中再次加载的第一个图像),playTo() 方法将轮播一直倒回到开头(图像原始位置所在的位置),而不是只需向右移动一步即可。

next() 和 prev() 方法工作正常。当加载最后一张图像并调用 next() 时,轮播只是向右移动一步。如果我使用 playTo(),轮播会一直倒回到第一张图像。

我在文档或堆栈溢出中找不到任何有关此内容的信息。有没有办法强制 playTo() 将轮播移动到所选幻灯片最近的实例(快退或前进到下一个循环中的位置)?如果没有,这将是一个受欢迎的功能,因为它看起来非常合乎逻辑的行为。

提前致谢!

最佳答案

请手动比较要走的距离。

var targetIndex = yourIndex; //yourIndex is the index that you determined to go according to the image clicked.
var currentIndex = jssor_slider1.$CurrentIndex();
var slidesCount = jssor_slider1.$SlidesCount();

if(targetIndex < currentIndex) {
    if(currentIndex - targetIndex > slidesCount - currentIndex) {
        targetIndex += slidesCount;
    }
}
else {
    if(targetIndex - currentIndex > slidesCount - currentIndex) {
        targetIndex -= slidesCount;
    }
}

jssor_slider1.$PlayTo(targetIndex);

关于javascript - 循环轮播中的 Jssor playTo(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26828119/

相关文章:

javascript - Jssor slider 填充父级高度和宽度

javascript - 如何使用 ReactJS 组件将 xml 添加到 DOM

javascript - 如何将来自 Mongoose 的 JSON 映射到 Vue 和 Quasar?

javascript - Tizen 中的 Java 脚本警报

javascript - 使用javascript更改div的背景图像

javascript - 在 JSSOR 中,如何向全宽 slider 添加额外的幻灯片?

javascript - JQuery div 旋转

Jssor - 如何保持图像纵横比?

javascript - 带嵌套幻灯片的 Jssor slider + 垂直缩略图

javascript - JSSOR - 每次网页刷新后保持当前 slider 位置