android 图片轮播带缩略图,轮播图 带有缩略图

设计给了个图 要求轮播带有 缩略图 选样式还要放大 如下图

在网上找了下没有有相似的 但还是与设计图有些差距 无奈

找了原来的代码 以此为基础 改呗

主要的还是缩略图的点击 放大 缩小 以及大于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;

}