在点击“下一步”和“上一步”时,任何数量的“里”只移动1次
Dynamic li moves only 1 times on any number of li on click of next and previous
我有动态的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--;
}
});
相关文章:
- 如何禁用在Bootstrap中不完成一步就转到下一步
- 将“下一步”和“上一个”按钮添加到较大的图像
- 引导表单向导 - 防止在提交 ajax 响应的每个页面表单出现错误时滚动到下一步
- 如何创建一个“下一步”按钮,使用 Java 脚本和 Twitter Bootstrap 切换选项卡
- 如何在单击下一步时使文本移动/更改
- 您如何控制在填写表单时单击下一步时 iOS/Android 将关注哪个字段
- Jquery UI选项卡-根据输入字段值,使用“下一步”/“上一步”按钮推进选项卡
- Jquery选项卡单击时高亮显示'下一步'按钮
- 如何解析用户对象以返回屏幕名称并继续下一步操作
- 如何点击谷歌饼图进入下一步行动
- 转到下一步时更改输入值
- 尝试在JavaScript中制作下一步按钮以显示JSON数组
- 跳转到 CasperJS 中步骤超时的下一步
- 如何在 UI 引导分页中禁用下一步按钮
- 等待几秒钟,然后再运行下一步量角器
- 如何在textField上使用zIndex,这样当我在Titanium中按下一步时,我可以移动到其他textField
- 到达最后一个元素时隐藏下一步按钮
- 输入数字字段时移动浏览器上的“输入/下一步”键的行为
- “下一步”按钮在到达库数组的末尾之前停止导航
- 在点击“下一步”和“上一步”时,任何数量的“里”只移动1次