我正在尝试使轮播在轮播中的第一个显示的幻灯片上显示选择状态。
JSFiddle
演示
的HTML
<div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
<div><b>0</b></div>
<div><b>1</b></div>
<div><b>2</b></div>
<div><b>3</b></div>
<div><b>4</b></div>
<div><b>5</b></div>
</div>
</div>
<nav>
<ul id="nav">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</nav>
<div style='text-align:center;padding-top:20px;'>
<button id ="mySwipePrev">prev</button>
<button id ="mySwipeNext">next</button>
</div>
您可以使用以下方法将selected
类添加到第一个li
元素:
$("#nav li").eq(0).addClass("selected");
然后我修改了callback
函数中的代码以选择index
而不是index-1
:
$Elements.eq(index).addClass("selected");
然后,我修改了代码,以防prev
和next
按钮单击事件的选择mySwipe.getPos()
而不是mySwipe.getPos()-1
:
$('#mySwipePrev').on('click', function () {
mySwipe.prev();
$navLi.removeClass('selected');
$navLi.eq(mySwipe.getPos()).addClass('selected');
});
$('#mySwipeNext').on('click', function () {
mySwipe.next();
$navLi.removeClass('selected');
$navLi.eq(mySwipe.getPos()).addClass('selected');
});
并单击导航li元素(0,1,2,3,4 ..),使用$(this).index()
代替$(this).index()+1
(将+1添加到索引)
$navLi.on ('click', function () {
window.mySwipe.slide($(this).index(), 200);
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句