Javascript 重置函数时将类移动到第一个同级

我使用

.prev

.next

jquery通过活动类来显示当前正在播放的幻灯片，或者指示当前正在播放的幻灯片

下面是生成该函数的代码。它查找类

处于活动状态的当前同级，然后将其传递给上一个或下一个同级

//Slider Directional Controls
$('.buttons .prev').on('click', function() {
    if( position > 0 ) { 
        position--;
        $('.program-slider .slides').css({'right': position * programSliderWidth }); // -- CHANGE 3 --
        $('.navigation .controls').find('li.active').removeClass('active').prev('li').addClass('active');

    }
});

$('.buttons .next').on('click', function() {
    if( position < totalSlides - 1 ) { 
         position++;
          $('.program-slider .slides').css({'right': position * programSliderWidth});   
          $('.navigation .controls').find('li.active').removeClass('active').next('li').addClass('active');

      }
});


函数滑块（）{
$（'.navigation.controls li.active'）.removeClass（'active'）；
$（'.navigation.controls li:first child'）.addClass（'active'）；
var programSliderWidth=$（'.program slider'）.width（），
sliderContainer=$（'.program slider.slides'），
幻灯片=$（'.program slider.slides li'），
移动=0，
位置=0，
totalSlides=$（'.program slider.slides li'）。长度；
//基于.program滑块的宽度应用宽度
幻灯片宽度（程序幻灯片宽度）；
//根据幻灯片数量应用最大宽度
sliderContainer.width（总幻灯片*程序幻灯片宽度）；
//滑块控制
$（'.navigation.controls li'）。在（'click'，function（）上{
位置=$（this）.index（）；/--更改1--
var move=位置*程序滑块宽度；
$（'.program slider.slides'）.css（{'right'：move}）；
$（'.navigation.controls li.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
//滑块方向控制
$（'.buttons.prev'）。在（'click'，function（）上{
如果（位置>0）{
位置--；
$（'.program slider.slides'）.css（{'right'：position*programSliderWidth}）；//--更改3--
$（'.navigation.controls'）.find（'li.active'）.removeClass（'active'）.prev（'li'）.addClass（'active'）；
}
});
$（'.buttons.next'）。在（'click'，function（）上{
如果（位置

/*http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
许可证：无（公共域）
*/
html、正文、div、span、小程序、对象、iframe、，
h1、h2、h3、h4、h5、h6、p、块报价、预，
a、 缩写，首字母缩写，地址，大，引用，代码，
del、dfn、em、img、ins、kbd、q、s、samp、，
小、走向、强、次、辅助、tt、var、，
b、 u，i，中心，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td、，
文章、旁白、画布、细节、嵌入、，
图，figcaption，页脚，页眉，H组，
菜单、导航、输出、ruby、节、摘要、，
时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；}
/*旧浏览器的HTML5显示角色重置*/
文章，旁白，细节，图表，
页脚、页眉、H组、菜单、导航、节{
显示：block；}
身体{
线条高度：1；}
ol，ul{
列表样式：无；}
区块报价，q{
引号：无；}
blockquote:before，blockquote:after，
问：之前，问：之后{
内容：''；
内容：无；}
桌子{
边界塌陷：塌陷；
边框间距：0；}
* {
框大小：边框框；}
.程序滑块{
最大宽度：1280px；
保证金：0自动；
高度：200px；
背景颜色：米色；
溢出：隐藏；}
.程序滑块.幻灯片{
溢出：隐藏；
位置：相对位置；
右：0；
-webkit转换：所有0.3s线性；}
.program slider.slides li{
位置：相对位置；
浮动：左；
-webkit转换：所有0.3s线性；}
.导航{
最大宽度：1280px；
边距：0自动；}
.导航.控制李{
显示：内联块；
填充：10px；
宽度：25%；
浮动：左；}
.navigation.controls li.active{
背景色：青色；
颜色：#fff；}
.按钮{
位置：绝对位置；
排名：30%；}
/*#sourceMappingURL=style.css.map*/


幻灯片1
幻灯片2
幻灯片3
幻灯片4


prev
下一步


幻灯片1
幻灯片2
幻灯片3
幻灯片4

好的，我们将使用css
:eq
选择器使用
li
索引，而不是使用
.prev（'li'）
和
.next（'li'）

因此，您的代码可以是这样的，请参见下面的解释


函数滑块（）{
$（'.navigation.controls li.active'）.removeClass（'active'）；
$（'.navigation.controls li:first child'）.addClass（'active'）；
var programSliderWidth=$（'.program slider'）.width（），
sliderContainer=$（'.program slider.slides'），
幻灯片=$（'.program slider.slides li'），
移动=0，
位置=0，
totalSlides=$（'.program slider.slides li'）。长度；
//基于.program滑块的宽度应用宽度
幻灯片宽度（程序幻灯片宽度）；
//根据幻灯片数量应用最大宽度
sliderContainer.width（总幻灯片*程序幻灯片宽度）；
//滑块控制
$（'.navigation.controls li'）。在（'click'，function（）上{
位置=$（this）.index（）；/--更改1--
var move=位置*程序滑块宽度；
$（'.program slider.slides'）.css（{'right'：move}）；
$（'.navigation.controls li.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
//滑块方向控制
$（'.buttons.prev'）。在（'click'，function（）上{
位置=（位置>0）？位置-1:totalSlides-1；
$（'.program slider.slides'）。
//Add Class active on Start
$('.navigation .controls li.active').removeClass('active');
$('.navigation .controls li:first-child').addClass('active');