在网上也找到很多类似但都不是设计师所需要的,只能中间写一个。
因为是多级联动,逻辑这一块带来了不少麻烦,下面直接贴代码:
--------------------------------html--------------------------------------------
<div class="content-details inlneBlock">
<div class="fa-img">
<div class="big-img w51">
<ul id="details-bigImg">
<li style="display: block"><img src="images/pro/8201.jpg" alt="" width="100%">li>
<li style="display: none"><img src="images/pro/310494BA89344D4CA779F383E107CD78.jpg" alt="" width="100%">li>
<li style="display: none"><img src="images/pro/T83001.jpg" alt="" width="100%">li>
<li style="display: none"><img src="images/pro/8201.jpg" alt="" width="100%">li>
<li style="display: none"><img src="images/pro/310494BA89344D4CA779F383E107CD78.jpg" alt="" width="100%">li>
<li style="display: none"><img src="images/pro/8201.jpg" alt="" width="100%">li>
<li style="display: block"><img src="images/pro/8201.jpg" alt="" width="100%">li>
<li style="display: none"><img src="images/pro/310494BA89344D4CA779F383E107CD78.jpg" alt="" width="100%">li>
<li style="display: none"><img src="images/pro/T83001.jpg" alt="" width="100%">li>
ul>
div>
<div class="fa-btn btn-prev">div>
<div class="fa-btn btn-next">div>
div>
<div class="img-items">
<div class=" inlneBlock li-btn li-btn-prev">div>
<div class="li-img inlneBlock">
<ul id="details-minImg">
<li class="active"><img src="images/pro/8201.jpg" alt="">li>
<li><img src="images/pro/310494BA89344D4CA779F383E107CD78.jpg" alt="">li>
<li><img src="images/pro/T83001.jpg" alt="">li>
<li><img src="images/pro/8201.jpg" alt="">li>
<li><img src="images/pro/310494BA89344D4CA779F383E107CD78.jpg" alt="">li>
<li><img src="images/pro/8201.jpg" alt="">li>
<li><img src="images/pro/8201.jpg" alt="">li>
<li><img src="images/pro/310494BA89344D4CA779F383E107CD78.jpg" alt="">li>
<li><img src="images/pro/T83001.jpg" alt="">li>
ul>
div>
<div class="li-btn li-btn-next inlneBlock">div>
div>
div>
/*------------------------------css---------------------*/
.content-details .big-img {
position: relative;
width: 710px;
height: 530px;
overflow: hidden;
border: solid 10px #ffffff;
}
.fa-img {
position: relative;
display: inline-block;
width: 730px;
overflow: hidden;
}
.fa-btn {
position: absolute;
width: 40px;
height: 80px;
cursor: pointer;
top: 50%;
margin-top: -40px;
}
.fa-img .btn-prev {
left: 10px;
background: url("../images/icon/gallery_arrow_1.png") no-repeat;
background-position: 0;
}
.fa-img .btn-next {
right: 10px;
background: url("../images/icon/gallery_arrow_1.png") no-repeat;
background-position: -40px 0;
}
.content-details .img-items {
width: 730px;
height: 97px;
overflow: hidden;
position: relative;
}
.li-btn {
position: absolute;
width: 41px;
height: 97px;
top: 0;
cursor: pointer;
}
.li-btn-prev {
left: 0px;
background: url("../images/icon/gallery_arrow_2.png") no-repeat;
background-position: 0;
}
.li-btn-next {
right: 0px;
background: url("../images/icon/gallery_arrow_2.png") no-repeat;
background-position: -41px;
}
.li-img{
position: relative;
width: 648px;
height: 97px;
overflow: hidden;
margin: 0 0 0 41px;
}
.li-img ul li {
float: left;
margin-left: 20px;
cursor: pointer;
height: 97px;
position: relative;
}
#details-minImg {
position: relative;
height: 97px;
}
.li-img ul li:nth-of-type(1) {
margin-left: 0px;
}
.li-img ul li img {
max-width: 147px;
width: 100%;
}
.li-img ul .active::after {
content: " ";
position: absolute;
display: block;
width: 145px;
height: 95px;
border: 1px solid red;
top: 0;
}
/*补充说明,.w51表示width:51,可能样式没有贴全,各位可改一改,总体问题不大
/*------------------------js------------------*/
<script>
var maxI, sliderLi, index, sliderminImg,liindex,liLenght,minI,minslider;
liindex =0;
liLenght= 0;
$(function () {
//产品详情页轮播图
sliderLi = $('#details-bigImg').find('li');
// console.log(sliderLi);
len = sliderLi.length - 1;
index = 0;
minI = parseInt(len/4);
maxI =minI;
minslider =0;
$('.btn-prev').on('click', function () {
console.log(index);
if (index == 0){
_addBorder(0);
}
_prev();
});
$('.btn-next').on('click', function () {
console.log(index);
_next();
});
// console.log(index);
//绑定小图列表
sliderminImg = $('#details-minImg').find('li');
//设置ul的width
$('#details-minImg').width(len*167);
$(sliderminImg).each(function (i,even) {
$(this).on('click',function () {
console.log(i);
index = i;
console.log(index);
_setBig(i);
_addBorder(i);
})
});
$('.li-btn-next').on('click', function () {
// console.log(minI);
if(minI >= 1){
minslider += (-167*3);
$('#details-minImg').animate({'left':minslider+'px'}, 500);
minI--;
}
});
$('.li-btn-prev').on('click', function () {
// console.log(minI);
if(minI < maxI){
minslider += (167*3);
$('#details-minImg').animate({'left':minslider+'px'}, 500);
minI++;
}
})
});
function _prev() {
if (index == 0) {
return false;
}
_fadeOut(index);
this.index--;
_fadeIn(index);
_liprev(index);
_addBorder(index);
}
function _next() {
if (index == len) {
console.log(index);
return false;
}
console.log(len);
_fadeOut(index);
index++;
_fadeIn(index);
_liNext(index);
_addBorder(index);
}
function _fadeOut(index) {
// console.log(index);
var tempImg = $(sliderLi[index]);
$(tempImg).delay(0).fadeOut(500);
}
function _fadeIn(index) {
// console.log(index);
var tempImg = $(sliderLi[index]);
$(tempImg).delay(500).fadeIn(600);
}
//轮播图小图列表
function _liNext(index) {
if((index-1)%2 == 0 && index !=1) {
// console.log('right');
liindex += 2;
console.log(liindex);
liLenght=-167*liindex;
console.log(liindex);
$('#details-minImg').animate({'left':liLenght+'px'}, 500);
}
}
function _liprev(index) {
if((index-1)%2 == 0 && liLenght <=-167) {
// console.log('left');
liindex -= 2;
console.log(liindex);
liLenght=-167*liindex;
console.log(liindex);
$('#details-minImg').animate({'left':liLenght+'px'}, 500);
}
}
//给小图添加红色框
function _addBorder(i) {
if(i >= len){
return false;
}
if(i < 0){
return false;
}
$(sliderminImg).each(function () {
$(this).removeClass('active');
});
$(sliderminImg[i]).addClass('active');
}
//点击小图立马切换到大图
function _setBig(i) {
$(sliderLi).each(function (i1,e1) {
_fadeOut(i1);
$(this).stop();
});
_fadeIn(i);
}
script>