Javascript jquery滑块连续滑动

您好，我有一个滑块小提琴使用jquery从另一个stackoverflow问题

我想得到的是，将此滑块转到连续滑块，而不必在结束后返回到第一个项目

我希望有人能向我解释一下如何利用克隆技术，因为我不明白这个想法

ps不需要任何滑块我需要一个代码，因为我正在构建一个自定义

---

提前谢谢你

好吧，看来你指的是无限卷轴。我试得很快，成功了

几件事：

对于无限滚动条，最好使用全局变量来维护当前的幻灯片编号。为了简单起见，我使用了

auto_target

而不是变量

target

方法是复制前1或2张幻灯片（取决于遮罩宽度），并将其附加到滑块容器的末端（附加到UL）

当滑块到达最后一张幻灯片时，将滑块移动到重复的幻灯片，并假装（我的意思是高亮显示快速导航）滑块位于位置0（因为重复的滑块与第一张幻灯片相同））

当

当前

滑块数大于幻灯片总数（li）时，将滑块（UL）

左

位置设置为0，并将

目标

滑块设置为1，因为我们已经使用“复制”显示了第一个滑块

希望这会有帮助

var触发器=$（'ul.triggers li'）；
var images=$（'ul.images li'）；
var lastElem=triggers.length-1；
变量掩码=$（'.mask ul.images'）；
var imgWidth=images.width（）；
var目标=0；
var auto_target=0；
var屏蔽宽度=340；
var slides\u at\u a\u time=Math.ceil（掩码宽度/imgWidth）；
triggers.first（）.addClass（'selected'）；
css（'width'，imgWidth*（lastElem+1+slides\u在a\u时间）+'px'）；
函数sliderResponse（目标）{
遮罩。停止（真、假）。设置动画({
'左'：'-'+imgWidth*target+'px'
}, 300);
triggers.removeClass（'selected'）.eq（目标%images.size（））.addClass（'selected'）；
}
触发器。单击（函数（）{
警报（“非执行”）；
});
$（'.next'）。单击（函数（）{
警报（“非执行”）；
});
$（'.prev'）。单击（函数（）{
警报（“非执行”）；
});
函数slidenting（）{
auto_target++；
if（auto_target>images.size（））{
自动_目标=1；
css（'left'，0）；
}
滑块响应（自动_目标）；
}
images.slice（0，每次滑动）。clone（）.appendTo（mask.addClass（'duplicate'）；
var timingRun=setInterval（函数（）{
滑动（）；
}, 5000);
函数resetTiming（）{
清除间隔（计时运行）；
计时运行=设置间隔（函数（）{
滑动（）；
}, 5000);
}

正文{
背景色：#000；
位置：相对位置；
字体大小：14px；
字体系列：arial；
}
.面具{
浮动：左；
利润率：40像素；
宽度：340px；
高度：266px；
溢出：隐藏；
}
ul图像{
位置：相对位置；
顶部：0px；
左：0px；
}
李先生{
浮动：左；
宽度：170px；
}
触发器{
位置：绝对位置；
顶部：310px；
左：80px；
}
李先生{
浮动：左；
利润率：0.5px；
字体：粗体16px arial；
光标：指针；
背景色：#ccc；
颜色：#000；
填充：10px；
列表样式类型：无；
}
ul.li.selected{
背景色：红色；
颜色：#000；
}
.控制{
位置：绝对位置；
顶部：380px；
颜色：#fff；
光标：指针；
}
上一篇{
左：120px；
}
.下一个{
左：180像素；
}

0
一,
二,
三,
四,

上
接下来

我已经更新了你的，这样它仍然可以继续播放，所以如果你点击一张幻灯片，它将继续播放，否则它不会循环

关键代码是

sliderTiming（）

函数：

if (target < lastElem) {
    sliderResponse(++target);
}

if（目标

这意味着只有当当前幻灯片不是最后一张幻灯片时才会发生

sliderResponse

（触发滑动）

---

++target

表示“将1添加到目标，然后在上下文中使用它”（在上下文中，它作为参数传递）。

如果要在最后一个元素之后停止滑块，则应在sliderResponse（目标）之后添加此行if（target！=0）；打40号线谢谢。你没有正确理解我的意思，我不想实际停止滑块，我想让滑块在最后一项之后直接滑动第一个元素！谢谢你的帮助这不是我需要的。我需要的是一种方法，使一个很酷的无限循环滚动谢谢你的帮助。它怎么能不返回到第一个项目连续？谢谢你。您已经为我澄清了一些事情，但不幸的是，您的小提琴不起作用，我希望您检查一下，因为它不像您所说的那样制作无限卷轴。@user3687377您必须根据蒙版的大小复制幻灯片。我更新了小提琴。现在应该更好了谢谢你，萨米尔。我能理解其中的一部分，谢谢。

if (target < lastElem) {
    sliderResponse(++target);
}