Question

我为一个网站制作了一个jQuery滑块，它有9个幻灯片，我希望计数器只计算到9个。当我到达最后一张幻灯片（09年9月）并点击时，会发生什么事情。 NEXT bnt，它转到第一张幻灯片（09年01月），当我点击进入第二张幻灯片时，我得到了这个：09年11月。请帮忙！

它是一个无限的滑块，并希望计数器工作＆＃34; UP＆＃34;和＆＃34; DOWN＆＃34;，意思是如果用户进入NEXT则将计数器添加，如果用户前一个则减去计数器。

滑块位于此网站http://madebymorro.com/web_dev_vavilco/ 在最底层。

谢谢！

我的代码是HTML：

<section id="construction">
<div class="wrapper">
  <div id="home-slider">
    <div id="slider-data">
      <div class="count">
        <span class="current">1</span>/09
      </div>
      <div class="slider-nav">
        <div class="prev"><img src="images/home-prev.svg" alt=""></div>
        <div class="next"><img src="images/home-next.svg" alt=""></div>
      </div>
    </div>
    <div id="home-slider-c">
      <section class="slider-project">
        <img src="images/home-slider001.jpg" alt="">
        <div class="img-data">
          <p>zaragoza</p>
          <p>apartamentos</p>
        </div>
      </section>
      <section class="slider-project">
        <img src="images/home-slider002.jpg" alt="">
        <div class="img-data">
          <p>bravtevilla</p>
          <p>casas</p>
        </div>
      </section>
      <section class="slider-project">
        <img src="images/home-slider003.jpg" alt="">
        <div class="img-data">
          <p>business Center Dorado</p>
          <p>oficinas</p>
        </div>
      </section>
      <section class="slider-project">
        <img src="images/home-slider004.jpg" alt="">
        <div class="img-data">
          <p>balcones de la trinidad</p>
          <p>apartamentos</p>
        </div>
      </section>
      <section class="slider-project">
        <img src="images/home-slider005.jpg" alt="">
        <div class="img-data">
          <p>gratamira 131</p>
          <p>apartamentos</p>
        </div>
      </section>
      <section class="slider-project">
        <img src="images/home-slider006.jpg" alt="">
        <div class="img-data">
          <p>torre olaya plaza</p>
          <p>apartamentos y plaza comercial</p>
        </div>
      </section>
      <section class="slider-project">
        <img src="images/home-slider007.jpg" alt="">
        <div class="img-data">
          <p>torre olaya plaza</p>
          <p>locales comerciales</p>
        </div>
      </section>
      <section class="slider-project">
        <img src="images/home-slider008.jpg" alt="">
        <div class="img-data">
          <p>plaza castilla</p>
          <p>apartamentos</p>
        </div>
      </section>
      <section class="slider-project">
        <img src="images/home-slider009.jpg" alt="">
        <div class="img-data">
          <p>sauses del country</p>
          <p>apartamentos</p>
        </div>
      </section>
    </div>
  </div>
</div>

我的代码是jQuery：

var slider = $('#home-slider-c'),
  next = $('.slider-nav .next'),
  prev = $('.slider-nav .prev');

$('#home-slider-c section:last-child').insertBefore('#home-slider-c section:first-child');
  slider.css('margin-left', '-100%');

  var n = 0;
  function getNext() {
    var e = n === $('.slider-project').length - 1 ? 0 : n + 1;
    $(".current").html(e + 1);
    n++;
    console.log(e);
    slider.animate({
      marginLeft: '-200%'
    }, 700, function() {
      $('#home-slider-c section:first-child').insertAfter('#home-slider-c section:last-child');
      slider.css('margin-left', '-100%');
    });
    // $(".current").html(e++);
  }
  var n = 0;
  function getPrev() {
    var e = n <= 0 ? $('.slider-project').length - 1 : n - 1;
    $(".current").html(e + 1);
    n--;
    console.log(e);
    slider.animate({
      marginLeft: 0
    }, 700, function() {
      $('#home-slider-c section:last-child').insertBefore('#home-slider-c section:first-child');
      slider.css('margin-left', '-100%');
    });
  }

next.on('click', getNext);
prev.on('click', getPrev);

Answer 1

使用提醒操作员%您可以：

＆＃13;

var tot = 6,    // Let's say we have 6 slides.
    c = 0;      // Dummy counter

$("#prev, #next").on("click", function(){
  
  // Increment or decrement counter depending on button ID
  c = this.id==="next" ? ++c : --c; 
  
  // OK almost there, now let's loop our counter to prevent exceeding <0 or >5 
  // >5 since index 5 is the 6th slide (tot-1).
  // If counter went less than 0 (prev button) than set it to tot-1
  // For all other cases use modulo % which will reset it to 0 automagically.
  c = c<0 ? tot-1 : c%tot;
  
  $("#test").text(c);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id=prev>&laquo;</button>
<span id=test>0</span>
<button id=next>&raquo;</button>

＆＃13;

以上内容可以使用更大的if else逻辑来编写，但如果它完全清楚，只需使用此代码段并将其放入您构建的任何当前或未来的图库中：

// Logic to loop counter on prev / next click:
c = (this.id==="next" ? ++c : --c) < 0 ? tot-1 : c%tot;

Answer 2

尝试使用此单个计数器初始化为1

 ....
 var e= 1;
 function getNext() {
    e=  e<$('.slider-project').length?e:0;
    e++;
    $(".current").html(e);
    // n++;
     console.log(e);
  ....
   }
function getPrev() {
   e=  e<=1?$('.slider-project').length+1:e;
   e--;
   $(".current").html(e);
   //  n--;
    console.log(e);
     ....
   }

制作滑块计数器，只计算滑块中的幻灯片数量

2 个答案: