展示效果:

实现逻辑:点击图片的时候 把第一块(外观)的所有图片数据 直接赋值到弹框上.

用的swiper这个轮播,自带动画

html

放上源码

Document

// 字体

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + "px";

.header_fixed {

border-bottom: none;

}

.swiper-container {

width: 100%;

height: 100%;

}

.swiper-slide {

text-align: center;

font-size: 18px;

background: #fff;

/* Center slide text vertically */

display: -webkit-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

}

.ru_list_da>ul>li {

width: 2.9rem !important;

}

.ru_list_da>ul {

display: block !important;

}

.ru_piaos .ru_list_da>ul {

display: flex !important;

}

.ru_piaos .ru_list_da>ul>li {

width: 100% !important;

margin: 0 !important;

}

$(function () {

$(".re_page_tu").each(function () {

$(this).find(".ru_list_da>ul>li:lt(6)").show();

if ($(this).find(".ru_list_da>ul>li").size() <= 6) {

$(this).find(".ru_list_da em").hide();

}

})

$(".ru_list_da em").click(function () {

$(this).hide();

$(this).siblings("ul").find("li").show();

})

var indexh = "";

var cun_this = "";

$(".re_page_tu").each(function () {

$(this).find(".ru_list_da>ul>li").click(function () {

var r_dat = $(this).parent().parent().parent().html();

$(".ru_piaos").show();

$(".ru_dats").append(r_dat);

$(".ru_tets p em").html($(this).index() + 1);

var inde_data = $(this).parents(".re_page_tu").index();

$(".swiper-container").attr("id", inde_data + 'xix');

var mySwiper = null;

$(".ru_piaos .ru_list_da").addClass("swiper-container");

mySwiper = new Swiper('.swiper-container', {

on: {

reachBeginning: function () {

console.log("开始" + this.activeIndex);

$(".ru_tets p em").html(this.activeIndex + 1);

},

slidePrevTransitionEnd: function () {

console.log("开始" + this.activeIndex);

$(".ru_tets p em").html(this.activeIndex + 1);

},

slideNextTransitionEnd: function () {

console.log("开始" + this.activeIndex);

$(".ru_tets p em").html(this.activeIndex + 1);

},

},

});

mySwiper.setTransition(500); //设定过渡的时间

var vleft = -$(this).index() * $(window).width();

mySwiper.setTranslate(vleft);

$(".ru_piaos .swiper-wrapper li").eq($(this).index()).addClass(

"swiper-slide-active");

$(".ru_piaos .swiper-wrapper li").eq($(this).index()).prev().addClass(

"swiper-slide-prev").removeClass(

"swiper-slide-next swiper-slide-active");

$(".ru_piaos .swiper-wrapper li").eq($(this).index()).next().addClass(

"swiper-slide-next").removeClass(

"swiper-slide-prev swiper-slide-active");

$(".ru_dats h1").remove();

cun_this = $(this)

var zong_le = $(this).parent().find("li").length; //总长度

$(".ru_tets p span").html(zong_le);

})

})

// 关闭 清空

$(".ru_tu_guan").click(function () {

$(".ru_dats").html("");

$(".ru_piaos").hide();

$(".ru_tets p em").html("");

$(".ru_tets p span").html("");

})

})