功能效果图如下:
点击左右切换按钮时,图片左右按顺序切换。
点击下面的小图片时,切换为对应的图片。
当前显示的图片对应的底下的小图片加外边框(这里是蓝色,可能不太看得清,在第四张小图外面)。
主要思路是,将span里的自定义属性data-index与两组图片的索引值挂钩。
HTML部分代码:
<section id="showimg-left-section" >
<div class="row">
<span class="col-xs-0 col-sm-2 col-md-2 col-lg-2" data-index="0">
<img src="arrow-left.png" />
</span>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<ul>
<li><img src="1520907278.jpg" /></li>
<li><img src="1520907706.jpg" /></li>
<li><img src="1520907373.jpg" /></li>
<li><img src="1520907706.jpg" /></li>
</ul>
</div>
<span class="col-xs-0 col-sm-2 col-md-2 col-lg-2" data-index="0">
<img src="arrow-right.png" />
</span>
</div>
<ul class="btn-img">
<li class="active"><img src="1520907278.jpg" /></li>
<li><img src="1520907706.jpg" /></li>
<li><img src="1520907373.jpg" /></li>
<li><img src="1520907706.jpg" /></li>
</ul>
</section>
JQuery部分代码如下:
需要判断两种极端情况:
1、a==0时,点击后a应该等于图片数组长度-1,即切换到最后一张图;
2、b==图片数组长度-1时,点击后b应该等于0,即切换到第一张图;
$(document).ready(function(){
var imgList1 = $("#showimg-left-section div ul li").length;
$("#showimg-left-section div span:eq(0)").click(function(){
var a = parseInt($(this).attr("data-index"));
if(a == 0){
a = imgList1 - 1;
} else {
a = a-1;
}
move(a);
});
$("#showimg-left-section div span:eq(1)").click(function(){
var b = parseInt($(this).attr("data-index"));
if(b == imgList1-1){
b = 0;
} else {
b = b+1;
}
move(b);
});
function move(N){
$("#showimg-left-section div ul li:eq("+N+")").show().siblings().hide();
$("#showimg-left-section .btn-img li:eq("+N+")").addClass("active").siblings().removeClass("active");
$("#showimg-left-section div span").attr("data-index",N);
}
$("#showimg-left-section .btn-img li").click(function(){
var c = $(this).index();
move(c);
})
})
优化:上面红色部分的代码,如下:
$("#showimg-left-section div span").click(function(){
var index = parseInt($(this).attr('data-index'));
var imgList1 = $("#showimg-left-section div ul li").length;
if ($(this).hasClass('_left')) {
if (index == 0) {
index = imgList1 - 1;
} else {
index -= 1;
}
} else {
if (index == imgList1 - 1) {
index = 0;
} else {
index += 1;
}
}
move(index);
})