我有动态li（这里是静态的）但它可以是任意数量的li ..点击下一个和上一个箭头它只移动1次，其中条件是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>
答案 0 :(得分：1)
使用与您所做的不同逻辑但相同的技术实现，以便向前和向后移动边距。 check the fiddle
$("#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--;
}
});