我在MODX网站上有ms2Gallery。我想添加一些功能(添加左右按钮)。
<div class="large-12 medium-12 columns main_page_preview text-center">
<div class="main_page_title large-8 medium-8 large-offset-2 medium-offset-2 columns">
<h1>NAME</h1>
</div>
<div id="msGallery">
<div class="large-12 medium-12 columns" style="max-height: 845px; overflow: hidden; margin-bottom: 15px;" href="/assets/images/resources/33/banya-10.jpg">
<img src="/assets/images/resources/33/banya-10.jpg" width="100%" alt="" title="" id="mainImage">
</div>
<div class="clearfix"></div>
<div class="large-2 medium-2 columns">
<a href="/assets/images/resources/33/banya-01.jpg" class="thumbnail" data-image="/assets/images/resources/33/banya-01.jpg">
<img src="/assets/images/resources/33/360x270/banya-01.jpg" alt="" title="banya_01.jpg" width="100%" data-id="">
</a>
</div>
<div class="large-2 medium-2 columns">
<a href="/assets/images/resources/33/banya-04.jpg" class="thumbnail" data-image="/assets/images/resources/33/banya-04.jpg">
<img src="/assets/images/resources/33/360x270/banya-04.jpg" alt="" title="banya_04.jpg" width="100%" data-id="">
</a>
</div>
<div class="large-2 medium-2 columns">
<a href="/assets/images/resources/33/banya-06.jpg" class="thumbnail" data-image="/assets/images/resources/33/banya-06.jpg">
<img src="/assets/images/resources/33/360x270/banya-06.jpg" alt="" title="banya_06.jpg" width="100%" data-id="">
</a>
</div>
<a href="javascript:void(0)"><img src="build/img/prev-left.png" class="left-arrow-gallery" id="leftarrow"></a>
<a href="javascript:void(0)"><img src="build/img/next-right.png" class="right-arrrow-gallery" id="rightarrow"></a>
</div>
为了解决这个问题,我创建了这个js-code:
var clicks= 0;
$('#rightarrow').on('click', function(){
clicks += 1;
$( ".thumbnail").eq(clicks).trigger("click");
})
var leftClicks = $('.thumbnail').length;
$('#leftarrow').on('click', function(){
leftClicks -= 1;
$( ".thumbnail").eq(leftClicks).trigger("click");
})
但是我想减少左键单击的元素,无论我点击右箭头多少次。
答案 0 :(得分:0)
var clicks = 0;
var leftClicks = 0;
var _ElementCount = $(".thumbnail").length;
$('#rightarrow').on('click', function(){
clicks = _ElementCount ? clicks = 0 : clicks += 1;
$( ".thumbnail").eq(clicks).trigger("click");
})
var leftClicks = $('.thumbnail').length;
$('#leftarrow').on('click', function(){
leftClicks = 0 ? clicks = _ElementCount : clicks -= 1;
$( ".thumbnail").eq(leftClicks).trigger("click");
})