写在前面的话:
网上这种插件很多,但是本身简单的东西,我并不希望导入很多文件到页面中,所以自己写一个,代码少,还维护方便。
首先见效果图:
js如下
思路:
- 首先实现点击每个缩略图切换大图;
- 然后,设定每次移动的步长,取到当前的left值,然后加或者减,并以jquery的animate动画移动。
- 超出范围做判断。
- var animateAble = true; //给一个开关,否则后面有快速点击一直移动的BUG
$(function(){
//【商品图片切换展示】
//切换图
var get_div=$(".otoc-thum-img > div");
get_div.click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
var index = get_div.index(this);
$(".otoc-details-img > img").eq(index).show().siblings().hide();
})
var animateAble = true; //给一个开关,否则后面有快速点击一直移动的BUG
//缩略图组移动
$(".next").click(function(){
var current_left = parseInt($(".otoc-thum-img").css("left")) //获取当前位置
var go_left = current_left-80
if (current_left < -45 || !animateAble)
{
return false;
}
else
{
animateAble = false;
$(".otoc-thum-img").animate({ left: go_left + "px" }, 200, function () {
animateAble = true;
});
}
});
$(".pre").click(function(){
var current_left = parseInt($(".otoc-thum-img").css("left")) //获取当前位置
var go_left = current_left+80
if (current_left >= 6 || !animateAble)
{
return false;
}
else
{
animateAble = false;
$(".otoc-thum-img").animate({ left: go_left + "px" }, 200, function () {
animateAble = true;
});
}
});
})
以上js里有要注意一个函数,parseInt. ---------parseInt() 函数可解析一个字符串,并返回一个整数。
详见:http://www.w3school.com.cn/jsref/jsref_parseInt.asp
为什么要用这个函数?请看如下图:
直接取这个缩略图组的left,返回的带px的一个字符串,用 typeof 测试后,返回的是string。
而我是希望拿到数值型,所以如此。
html如下:
<div class="box">
<div class="otoc-details-img"> <!--大图-->
<img src="img/details-big-1.jpg"/>
<img src="img/details-big-2.jpg"/>
<img src="img/details-big-3.jpg"/>
<img src="img/details-big-4.jpg"/>
<img src="img/details-big-5.jpg"/>
</div>
<div class="otoc-thum-wrap"> <!--这个是缩略图容器,需要定义overflow:hidden;-->
<div class="otoc-thum-img"> <!--按钮组-->
<div class="selected">
<img src="img/details-big-1.jpg" />
</div>
<div class="">
<img src="img/details-big-2.jpg" />
</div>
<div class="">
<img src="img/details-big-3.jpg" />
</div>
<div class="">
<img src="img/details-big-4.jpg" />
</div>
<div class="">
<img src="img/details-big-5.jpg" />
</div>
</div>
</div>
<div class="otoc-thum-btn"> <!--左右按钮-->
<div class="pre">
<i class="fa fa-angle-left"></i>
</div>
<div class="next">
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
<!-- 产品tab切换图 结束 -->
less如下:
/*外容器*/
.otoc-thum-wrap{
position: relative;
margin-top: 15px;
width: 100%;
height: 80px;
overflow:hidden;
border-radius:5px ;
border: 1px solid @otoc-border-color-1level;
}
/*大图*/
.otoc-details-img{
padding-top:8px;
img:nth-child(2),img:nth-child(3),img:nth-child(4),img:nth-child(5){ display: none;}
> img{ width: 260px; height: 260px;}
}
/*缩略图*/
.otoc-thum-img{
position: absolute;
left: 0px;
top: 0px;
padding: 10px 15px;
width: 340px;
height: 60px;
border: 1px solid #fff;
z-index: 999;
div{
float: left;
margin-left: 1.3px;
img{
width: 58.3px;
height: 58px;
border: 2px solid #fff;
cursor: pointer;
}
}
div.selected img { border: 2px solid #333; }
}
/*按钮*/
.otoc-thum-btn{
overflow:visible;
> div{
position: absolute;
cursor: pointer;
z-index: 999;
bottom:47px;
width: 20px;
height: 20px;
font-size: 24px;
text-align: center;
line-height: 20px;
border-radius:20px;
color: #00343B;
transition: all 0.3s;
&:hover{ color: #36c6d3; transform: scale(1.2);};
&:active{ transform: translate(2px,1px);}
}
> div.pre{ position: absolute; left: 1px; }
> div.next{ position: absolute; right:1px; }
}
js 完善版本(解决了之前会快速点击后-缩略图会一直左移或者右移的BUG,孙版本)
$(function(){
//【商品图片切换展示】
//切换图
var get_div=$(".otoc-thum-img > div");
get_div.click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
var index = get_div.index(this);
$(".otoc-details-img > img").eq(index).show().siblings().hide();
})
var animateAble = true;
//缩略图组移动
$(".next").click(function(){
var current_left = parseInt($(".otoc-thum-img").css("left")) //获取当前位置
var go_left = current_left-80
if (current_left < -45 || !animateAble)
{
return false;
}
else
{
animateAble = false;
$(".otoc-thum-img").animate({ left: go_left + "px" }, 200, function () {
animateAble = true;
});
}
});
$(".pre").click(function(){
var current_left = parseInt($(".otoc-thum-img").css("left")) //获取当前位置
var go_left = current_left+80
if (current_left >= 6 || !animateAble)
{
return false;
}
else
{
animateAble = false;
$(".otoc-thum-img").animate({ left: go_left + "px" }, 200, function () {
animateAble = true;
});
}
});
})