展示效果:
实现逻辑:点击图片的时候 把第一块(外观)的所有图片数据 直接赋值到弹框上.
用的swiper这个轮播,自带动画
html
放上源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta content="telephone=no" name="format-detection" />
<title>Document</title>
<link rel="stylesheet" href="../css/swiper.min.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/frame.css">
<link rel="stylesheet" href="../css/destine/ru_page.css">
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="../js/swiper.min.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/common.js"></script>
<script>
// 字体
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + "px";
</script>
<style>
.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;
}
</style>
</head>
<body>
<div class="header">
<div class="header_fixed header_fixeds">
<div class="header_left">
<div class="header_top_back">
<a href="javascript:history.back(-1)" class="city_guan">
<img src="../images/res2.png" alt="" style="width:.24rem">
</a>
</div>
</div>
<div class="header_centers cont_flex_1">
<span class="hea_center">酒店图片</span>
</div>
<div class="header_right">
<div class="header_right_width pub_fa"></div>
</div>
</div>
</div>
<main>
<div class="r_page_top">
<span class="on">全部</span>
<span>外观</span>
<span>大堂</span>
<span>客房</span>
<span>设施</span>
</div>
<div class="r_page_boot">
<div class="re_page_tu">
<h1>外观 <em>6张</em></h1>
<div class="ru_list_da">
<ul class="clearfix swiper-wrapper">
<li class="swiper-slide">
<img src="../images/ji_1.png" alt="">
</li>
<li class="swiper-slide">
<img src="../images/ji_2.png" alt="">
</li>
<li class="swiper-slide">
<img src="../images/ji_3.png" alt="">
</li>
</ul>
<em>展开更多</em>
</div>
</div>
<div class="re_page_tu">
<h1>客房 <em>12张</em></h1>
<div class="ru_list_da">
<ul class="clearfix swiper-wrapper">
<li class="swiper-slide">
<img src="../images/h_1.png" alt="">
</li>
<li class="swiper-slide">
<img src="../images/h_2.png" alt="">
</li>
<li class="swiper-slide">
<img src="../images/ji_3.png" alt="">
</li>
<li class="swiper-slide">
<img src="../images/h_1.png" alt="">
</li>
</ul>
<em>展开更多</em>
</div>
</div>
</div>
</main>
<div class="ru_piaos">
<div class="ru_piaos_fix"></div>
<div class="ru_piaos_con">
<div class="ru_tu_guan">
<img src="../images/tu_guan.png" alt="">
</div>
<div class="ru_tus">
<div class="ru_dats">
</div>
</div>
<div class="ru_dess data_flex">
<div class="ru_tets">
<h1>外观</h1>
<p><em></em>/<span></span></p>
</div>
<div class="ru_down">
<a href="">
<img src="../images/downs.png" alt="">
</a>
</div>
</div>
</div>
</div>
<style>
.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;
}
</style>
<script>
$(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("");
})
})
</script>
</body>
</html>
