展示效果:
实现逻辑:点击图片的时候 把第一块(外观)的所有图片数据 直接赋值到弹框上.
用的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;
}
酒店图片
全部
外观
大堂
客房
设施
外观6张
展开更多
客房12张
展开更多
外观
/
.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("");
})
})
