在点击“下一步”和“上一步”时,任何数量的“里”只移动1次

Dynamic li moves only 1 times on any number of li on click of next and previous

本文关键字:下一步 任何数 1次 移动 上一步 一步      更新时间:2023-09-26

我有动态的li's(这里是静态的),但它可以是任何数量的li..在点击下一个和上一个箭头时,它只移动一次,条件是li的总数只能是1或30。我需要的是根据它的总长度来移动li。在目前的情况下,它只移动了一次,我在它里面有很多li .

if ($("ul#localSlider").find('li').is(':hidden')) {
  $('ul#localSlider li:eq(1)').addClass('act');
}
var LocalCurrent = 0;
var localContainer = $('ul#localSlider');
var LocalTotalLi = localContainer.find('li').length;
var localLiWdth = localContainer.find('li').outerWidth();
var localContDiv = $('.local_links .linner').outerWidth();
var LocalPageno = Math.ceil(LocalTotalLi / 6);
localContainer.css('width', LocalPageno * 300 + '%');
var localUlWidth = localContainer.outerWidth();
var localPage = Math.ceil(localUlWidth / localContDiv);
//console.log(localPage);
$('a.localArrow').on('click', function(e) {
  e.preventDefault();
  var $this = $(this);
  var LocalMrgn = 0;
  var Localdir = $this.data('dir');
  LocalCurrent = (Localdir === 'next') ? LocalCurrent + 1 : LocalCurrent - 1;
  if (LocalCurrent <= 0) {
    LocalCurrent = 0;
  }
  if (LocalCurrent >= 2) {
    LocalCurrent = 0;
  }
  var LocalLiWidth = ((300 / LocalTotalLi));
  LocalMrgn = LocalCurrent * localContDiv;
  var LocalUnit;
  if (Localdir && LocalMrgn !== 0) {
    LocalUnit = (Localdir === 'next') ? '-=' : '+=';
  }
  // Animation Here:
  localContainer.animate({
    marginLeft: '-' + LocalMrgn + ''
  }, 500);
});
.local_links {
  position: relative;
}
.local_links .linner {
  overflow: hidden;
}
.gry_larrow.glarrow {
  position: absolute;
  /*left: 0; */
  top: 10px;
}
.sprite_img {
  background: url(http://static.english.pradesh18.com/pix/images/sprite_img.png?v=1) no-repeat 0 0;
  display: inline-block;
}
.gry_larrow {
  background-position: -324px -187px !important;
  width: 20px;
  height: 20px;
}
@media (min-width: 200px) a {
  text-decoration: none;
}
.gry_rarrow.grarrow {
  position: absolute;
  right: 0;
  top: 10px;
}
.gry_rarrow {
  background-position: -350px -187px !important;
  width: 20px;
  height: 20px;
}
#localSlider {
  width: 600%;
  list-style-type: none;
}
.sprite_img {
  background: url(http://static.english.pradesh18.com/pix/images/sprite_img.png?v=1) no-repeat 0 0;
  display: inline-block;
}
@media (min-width: 200px) a {
  text-decoration: none;
}
.local_links .linner {
  overflow: hidden;
}
.local_links .linner ul {
  width: 300%;
}
.local_links .linner li.act {
  background: #ff0000;
}
.local_links .linner ul li {
  float: left;
  padding-right: 35px;
  padding: 4px 15px;
  font-size: 14px;
  float: left;
}
.local_links .linner li.act a {
  color: #fff;
}
.local_links .linner ul li a {
  color: #333;
}
@media (min-width: 200px) a {
  text-decoration: none;
}
.local_links.wauto {
  width: auto;
  padding-right: 145px
}
.local_links .linner.mnon {
  margin: 0
}
.local_links.wauto .linner li {
  padding: 4px 15px
}
.cbox {
  display: none
}
.local_links .linner ul {
  width: 300%;
}
.local_links .linner li.act {
  background: #ff0000;
}
.local_links .linner ul li {
  float: left;
  padding-right: 35px;
  padding: 4px 15px;
  font-size: 14px;
  float: left;
}
.local_links .linner li.act a {
  color: #fff;
}
.local_links .linner ul li a {
  color: #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="local_links fright col-md-8 col-lg-8 col-xs-12">
  <a href="#" class="sprite_img gry_larrow glarrow localArrow" data-dir="prev"></a>
  <a href="#" class="sprite_img gry_rarrow grarrow localArrow" data-dir="next"></a>
  <div class="linner">
    <ul id="localSlider">
      <li data-slug="all" class="act localSecState" data-id="0" id="city_id:0"><a href="#">
                                        All</a></li>
      <li data-slug="bihar" class="localSecState" data-id="1"><a href="#">A'bad</a></li>
      <li data-slug="chhattisgarh" class="localSecState" data-id="2"><a href="#">Bharuch</a></li>
      <li data-slug="haryana" class="localSecState" data-id="3"><a href="#">Surat</a></li>
      <li data-slug="jharkhand" class="localSecState" data-id="4"><a href="#">Vadodara</a></li>
      <li data-slug="madhya-pradesh" class="localSecState" data-id="5"><a href="#">Patan</a></li>
      <li data-slug="rajasthan" class="localSecState" data-id="6"><a href="#">Bhavnagar</a></li>
      <li data-slug="madhya-pradesh" class="localSecState" data-id="5"><a href="#">Patan</a></li>
      <li data-slug="rajasthan" class="localSecState" data-id="6"><a href="#">Bhavnagar</a></li>
      <li data-slug="madhya-pradesh" class="localSecState" data-id="5"><a href="#">Patan</a></li>
      <li data-slug="rajasthan" class="localSecState" data-id="6"><a href="#">Bhavnagar</a></li>
      <li data-slug="bihar" class="localSecState" data-id="1"><a href="#">A'bad</a></li>
      <li data-slug="chhattisgarh" class="localSecState" data-id="2"><a href="#">Bharuch</a></li>
      <li data-slug="haryana" class="localSecState" data-id="3"><a href="#">Surat</a></li>
      <li data-slug="jharkhand" class="localSecState" data-id="4"><a href="#">Vadodara</a></li>
      <li data-slug="madhya-pradesh" class="localSecState" data-id="5"><a href="#">Patan</a></li>
      <li data-slug="rajasthan" class="localSecState" data-id="6"><a href="#">Bhavnagar</a></li>
      <li data-slug="madhya-pradesh" class="localSecState" data-id="5"><a href="#">Patan</a></li>
      <li data-slug="rajasthan" class="localSecState" data-id="6"><a href="#">Bhavnagar</a></li>
      <li data-slug="madhya-pradesh" class="localSecState" data-id="5"><a href="#">Patan</a></li>
      <li data-slug="rajasthan" class="localSecState" data-id="6"><a href="#">Bhavnagar</a></li>
    </ul>
  </div>
</div>

使用不同的逻辑实现,但与您所做的相同的技术,以便向前和向后移动边距。检查小提琴

 $("#next").click(function () {
     if(LocalTotalLi >= i)
     {
        localContainer.animate({
             marginLeft: "-=" + slidewidth + "px"
         }, 200);
     } 
     else{
         localContainer.animate({
             marginLeft: "" + 0 + "px"
         }, 200);
         i=0;
     }
     i++;
 });
 $("#prev").click(function () {
      if(i>0)
      {
           localContainer.animate({
               marginLeft: "+=" + slidewidth + "px"}, 200, function () {
               var marginLeft = localContainer.css("margin-left");
           });
       i--;
      }
  });