设计给了个图 要求轮播带有 缩略图 选样式还要放大 如下图
在网上找了下没有有相似的 但还是与设计图有些差距 无奈
找了原来的代码 以此为基础 改呗
主要的还是缩略图的点击 放大 缩小 以及大于5时选中第5个小图时 整体滚动就是个小的轮播
无论是点击上一个、下一个、还是缩略图 当选中的缩略图为 第一个或第五个时(下图选中放大的为第三个) 做判断
第一个:获取当前元素前面有几个兄弟元素 如果大于等于4(之所以是4 缩略图最多展示5个 在去掉选中的)则向右动画margin-left四个图片尺寸(尺寸=图片宽度+图片间隔)
否则小于4 则向右动画margin-left 相应数量图片尺寸
第五个:与第一个相反 获取的是当前元素后面的兄弟元素
当当前缩略图已经是第一个时 点击上一页 则动画到最后一个
当当前缩略图已经是最后一个时 点击下一页 则动画到第一个
// 轮播图
var play = function (){
var $picture = $('.picture'),
$pictureS = $picture.children(),
$pre = $('.pre'),
$next = $('.next'),
$follow = $('.follow'),
$imgS = $pictureS.length,
$imgWidth = $pictureS.width();
var thumbnail_num = 5, //展示缩略图数量
small_thumbnail_num = 4,//小图数
small_thumbnail_w = 112,//小图宽度
small_thumbnail_h = 57,//小图高度
big_thumbnail_w = 132,//大图宽度
big_thumbnail_h = 66,//大图高度
borderWidth = 2,//图片边框 选中样式
img_interval = 8;// 图片间隔距离
img_W = img_interval + small_thumbnail_w;// 小图占据宽度 加间隔距离
//图片少于 5个 后面不在执行
if($imgS <= thumbnail_num){
$follow.addClass("text_align_c")
}
if($imgS < 2){return}
$picture.prepend($pictureS.last().clone());
$picture.append($pictureS.first().clone());
imgtotal = $picture.children().length;
$picture.css({left:0-$imgWidth,width:imgtotal*$imgWidth});
var curIdx = 0;
var isAnimate = false;
if($imgS >= thumbnail_num){
$follow_first_img_w = $follow.children().outerWidth(true);
$follow.width(($imgS - 1) * img_W + $follow_first_img_w);
}
$pre.on('click',function(){
playPre();
});
$next.on('click',function(){
playNext();
});
$follow.find('li').on('click',function(){
var $idx = $(this).index();
if($idx > curIdx){
playNext($idx - curIdx);
}else if($idx < curIdx){
playPre(curIdx - $idx);
}
});
playGo();
function playPre(idx){
var idx = idx || 1;
if(isAnimate){return};
isAnimate = true;
$picture.animate({left: '+=' + ($imgWidth*idx)},function(){
curIdx = ($imgS + curIdx - idx)%$imgS;
if(curIdx === ($imgS - 1)){
$picture.css({left: 0-$imgWidth*$imgS});
}
isAnimate =false;
follow(1);
})
}
function playNext(idx){
var idx = idx || 1;
if(isAnimate){return}
isAnimate = true;
$picture.animate({left: '-=' + ($imgWidth*idx)},function(){
curIdx = (curIdx + idx)%$imgS;
if(curIdx === 0){
$picture.css({left: 0-$imgWidth});
}
isAnimate = false;
follow(2);
})
}
function follow(direction){
//选中的图片添加边框
$follow.children().removeClass('hover')
.eq(curIdx).addClass('hover');
//动画大图变小图
$follow.children().eq(curIdx).siblings().find("img").animate({
width: small_thumbnail_w,
height: small_thumbnail_h,
borderWidth: "0px"
})
//动画小图变大图
$follow.children().eq(curIdx).find("img").animate({
width: big_thumbnail_w,
height: big_thumbnail_h,
borderWidth: borderWidth
})
//图片数量大于 5
if($imgS >= thumbnail_num){
var $follow_li = $follow.children();
var $follow_li_len = $follow_li.length;
//获取 当前元素前面的兄弟元素
var $first_li = $follow_li.eq(curIdx).prevAll();
var $first_li_len = $first_li.length;
//获取 当前元素后面的兄弟元素
var $last_li = $follow_li.eq(curIdx).nextAll();
var $last_li_len = $last_li.length;
//下一页
if(direction == 2){
//获取匹配元素相对父元素的偏移 用于判断显示的缩略图中当前位于第五
var to_left_num = $(".breviary").find(".hover").position().left;
if(curIdx != 0 && to_left_num > 400){
if($last_li_len >= small_thumbnail_num){
$follow.animate({
marginLeft: -(img_W*small_thumbnail_num),
})
}else if($last_li_len < small_thumbnail_num){
var style = $(".follow").attr("style");
var _num_px = style.split("margin-left: ")[1];
var _num = _num_px == undefined ? 0 : _num_px.replace("px;",'')
$follow.animate({
marginLeft: -(img_W * $last_li_len + -_num),
})
}
}
}
//上一页
if(direction == 1){
//获取匹配元素相对父元素的偏移 用于判断显示的缩略图中当前位于第一
var to_left_num = $(".breviary").find(".hover").position().left;
if(curIdx == $follow_li_len - 1){
$follow.animate({
marginLeft: -( img_W*($follow_li_len-thumbnail_num) ),
})
}
click_img_and_left()
}
//点击缩略图
if(curIdx == 0){
$follow.animate({
marginLeft: 0,
})
}
click_img_and_left()
function click_img_and_left(){
if(to_left_num == -8 && $first_li_len >= small_thumbnail_num){
$follow.animate({
marginLeft: -( img_W * ($first_li_len - small_thumbnail_num) ),
})
}else if(to_left_num == -8 && $first_li_len < small_thumbnail_num){
$follow.animate({
marginLeft: 0,
})
}
}
}
}
function playGo(){
colck = setInterval(function(){
playNext();
},4000);
}
$("#carousel").hover(function(){
clearInterval(colck)
},function(){
playGo()
})
};
play();
/*轮播图*/
.account_img_box{
margin-top: 32px;
}
#carousel,.picture img{
width: 847px;
height: 432px;
}
#carousel{
position: relative;
margin-top: 24px;
overflow: hidden;
}
.picture{
position: absolute;
font-size: 0;
}
.picture>li{
display: inline-block;
}
.pre,.next{
width: 28px;
height: 60px;
display: block;
background: #000;
opacity: .5;
color: #fff;
position: absolute;
top: 50%;
margin-top: -20px;
cursor: pointer;
z-index: 1;
}
.pre{
left: 0;
}
.next{
right: 0;
}
.pre .info_sprite{
width: 10px;
height: 15px;
background-position: -730px 0;
margin: 22px 0 0 8px;
}
.next .info_sprite{
width: 10px;
height: 15px;
background-position: -739px 0;
margin: 22px 0 0 11px;
}
.breviary{
position: absolute;
bottom: 19px;
left: 50%;
width: 616px;
height: 70px;
overflow: hidden;
margin-left: -308px;
}
.banner_bg{
position: absolute;
top: 0;
left: 0;
width: 847px;
height: 432px;
background: url(./img/banner_bg.png) no-repeat;
background-position: 0 272px;
}
.follow{
font-size: 0;
}
.text_align_c{
text-align: center;
}
.follow>li{
display: inline-block;
margin-left: 8px;
margin-top: 6px;
cursor: pointer;
vertical-align: top;
transition: All 0.3s ease-in-out;
-webkit-transition: All 0.3s ease-in-out;
}
.follow>li.hover{
margin-top: 0;
}
.follow>li:first-child{
margin-left: 0;
}
.follow>li:first-child img{
width: 132px;
height: 66px;
border: 2px solid #fff;
}
.follow>li img{
width: 112px;
height: 57px;
}
.follow .hover img{
border: 0px solid #fff;
}