重置功能时将类移动到第一个兄弟

Question

我有一个滑块，通过使用.prev .next jquery来传递活动的类以显示顺序或指示当前正在播放的幻灯片，指示当前正在播放哪些幻灯片。

以下是生成该功能的代码。它查找具有类active的当前兄弟，然后将其传递给上一个或下一个兄弟。

//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');

      }
});

如果我想重置功能怎么办？基本上从类当前的兄弟中移除类active并将其放在第一个兄弟上，以表明它是第一张显示的幻灯片。

这是我创建的代码，但似乎正在工作但是当我点击滑块上的方向控件时，它不会将类active传递给下一个兄弟。我重置功能的方法是使用$(window).on('resize', function(){})

//Add Class active on Start
$('.navigation .controls li.active').removeClass('active');
$('.navigation .controls li:first-child').addClass('active');

function slider() {

    $('.navigation .controls li.active').removeClass('active');
	$('.navigation .controls li:first-child').addClass('active');

    var programSliderWidth = $('.program-slider').width(),
        sliderContainer    = $('.program-slider .slides'),
        slides             = $('.program-slider .slides li'),
        move               = 0,
        position           = 0,
        totalSlides        = $('.program-slider .slides li').length;  


    //Apply width based on the width of the .program-slider
    slides.width(programSliderWidth);

    //Apply Maximum width based on number of slides
    sliderContainer.width(totalSlides * programSliderWidth);

    //Slider Controls
    $('.navigation .controls li').on('click', function() {
        position = $(this).index(); // -- CHANGE 1 --
        var move     = position*programSliderWidth;

        $('.program-slider .slides').css({'right': move});

        $('.navigation .controls li.active').removeClass('active');
        $(this).addClass('active');
    
    });

    //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');

          }
    });
}


$(document).ready(function() {
    slider();
});

$(window).on('resize', function() {
    slider();
})

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  box-sizing: border-box; }

.program-slider {
  max-width: 1280px;
  margin: 0 auto;
  height: 200px;
  background-color: beige;
  overflow: hidden; }
  .program-slider .slides {
    overflow: hidden;
    position: relative;
    right: 0;
    -webkit-transition: all 0.3s linear; }
    .program-slider .slides li {
      position: relative;
      float: left;
      -webkit-transition: all 0.3s linear; }

.navigation {
  max-width: 1280px;
  margin: 0 auto; }
  .navigation .controls li {
    display: inline-block;
    padding: 10px;
    width: 25%;
    float: left; }
    .navigation .controls li.active {
      background-color: teal;
      color: #fff; }

.buttons {
  position: absolute;
  top: 30%; }

/*# sourceMappingURL=style.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="program-slider">
   <ul class="slides">
       <li>Slide 1</li>
       <li>Slide 2</li>
       <li>Slide 3</li>
       <li>Slide 4</li>
   </ul>


	<div class="buttons">
	    <ul>
	        <li class="prev">Prev</li>
	        <li class="next">Next</li>
	    </ul>
	</div>


</div>

<div class="navigation">
    <ul class="controls">
        <li>slide 1</li>
        <li>slide 2</li>
        <li>slide 3</li>
        <li>slide 4</li>
    </ul>
</div>

Answer 1

好的，我们将使用css li选择器而不是:eq和.prev('li')

使用.next('li')索引

所以你的代码可以像这样找到下面的解释

＆＃13;

＆＃13;

function slider() {

    $('.navigation .controls li.active').removeClass('active');
	$('.navigation .controls li:first-child').addClass('active');

    var programSliderWidth = $('.program-slider').width(),
        sliderContainer    = $('.program-slider .slides'),
        slides             = $('.program-slider .slides li'),
        move               = 0,
        position           = 0,
        totalSlides        = $('.program-slider .slides li').length;  


    //Apply width based on the width of the .program-slider
    slides.width(programSliderWidth);

    //Apply Maximum width based on number of slides
    sliderContainer.width(totalSlides * programSliderWidth);

    //Slider Controls
    $('.navigation .controls li').on('click', function() {
        position = $(this).index(); // -- CHANGE 1 --
        var move     = position*programSliderWidth;

        $('.program-slider .slides').css({'right': move});

        $('.navigation .controls li.active').removeClass('active');
        $(this).addClass('active');
    
    });

    //Slider Directional Controls
    $('.buttons .prev').on('click', function() {
      position = (position > 0) ? position - 1 : totalSlides - 1;
      $('.program-slider .slides').css({'right': position * programSliderWidth});
      $('.navigation .controls li').removeClass('active');
      $('.navigation .controls li:eq(' + position + ')').addClass('active');
    });

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


$(document).ready(function() {
    slider();
});

$(window).on('resize', function() {
    slider();
})

＆＃13;

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  box-sizing: border-box; }

.program-slider {
  max-width: 1280px;
  margin: 0 auto;
  height: 200px;
  background-color: beige;
  overflow: hidden; }
  .program-slider .slides {
    overflow: hidden;
    position: relative;
    right: 0;
    -webkit-transition: all 0.3s linear; }
    .program-slider .slides li {
      position: relative;
      float: left;
      -webkit-transition: all 0.3s linear; }

.navigation {
  max-width: 1280px;
  margin: 0 auto; }
  .navigation .controls li {
    display: inline-block;
    padding: 10px;
    width: 25%;
    float: left; }
    .navigation .controls li.active {
      background-color: teal;
      color: #fff; }

.buttons {
  position: absolute;
  top: 30%; }

/*# sourceMappingURL=style.css.map */

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="program-slider">
   <ul class="slides">
       <li>Slide 1</li>
       <li>Slide 2</li>
       <li>Slide 3</li>
       <li>Slide 4</li>
   </ul>


	<div class="buttons">
	    <ul>
	        <li class="prev">Prev</li>
	        <li class="next">Next</li>
	    </ul>
	</div>


</div>

<div class="navigation">
    <ul class="controls">
        <li>slide 1</li>
        <li>slide 2</li>
        <li>slide 3</li>
        <li>slide 4</li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

说明：

您的.prev和.next事件取决于position变量的值..您的问题是如何在代码中以良好的方式控制此值..所以我发现它通过索引而不是li和next('li')来控制prev('li')很简单，我通过在prev事件上使用position进行简单检查来控制position = (position > 0) ? position - 1 : totalSlides - 1;值{1}}关于下一个事件..之后，我使用position = (position < totalSlides - 1) ? position + 1 : 0;从所有$('.navigation .controls li').removeClass('active');中移除课程active并使用li来确定$('.navigation .controls li:eq(' + position + ')').addClass('active');索引使用css li选择器将类:eq()添加到其中

希望这些解释可以帮助您了解代码的内容