引入样式：swiper插件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="applicable-device" content="mobile">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="Cache-Control" content="no-transform " />
<title>亿阁房源详情</title>
<link href="reset.css" rel="stylesheet" />
<link href="swiper-4.1.6.min.css" rel="stylesheet" />
<link href="DetailYiGe.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="AllPhone.js"></script>
<script type="text/javascript" src="swiper-4.1.6.min.js"></script>
<script type="text/javascript" src="detail.js"></script>
</head>
<body>
<div class="lunbo">
<div class="swiper-container" id="allList">
<div class="swiper-wrapper">
<div class="swiper-slide" id="keting"> <div class="swiper-zoom-container"><img src="img/detail/demo4.png" /></div> </div>
<div class="swiper-slide" id="keting"> <div class="swiper-zoom-container"><img src="img/detail/demo5.png" /> </div></div>
<div class="swiper-slide" id="keting"> <div class="swiper-zoom-container"><img src="img/detail/demo4.png" /> </div></div>
<div class="swiper-slide" id="keting"> <div class="swiper-zoom-container"><img src="img/detail/demo5.png" /> </div></div>
<div class="swiper-slide" id="huxing"> <div class="swiper-zoom-container"><img src="img/detail/demo4.png" /> </div></div>
<div class="swiper-slide" id="huxing"> <div class="swiper-zoom-container"><img src="img/detail/demo5.png" /> </div></div>
<div class="swiper-slide" id="woshi" > <div class="swiper-zoom-container"><img src="img/detail/demo4.png" /> </div></div>
<div class="swiper-slide" id="chufang"> <div class="swiper-zoom-container"><img src="img/detail/demo5.png" /></div> </div>
<div class="swiper-slide" id="yushi"> <div class="swiper-zoom-container"><img src="img/detail/demo4.png" /> </div></div>
<div class="swiper-slide" id="yushi"> <div class="swiper-zoom-container"><img src="img/detail/demo5.png" /> </div></div>
<div class="swiper-slide" id="yangtai" > <div class="swiper-zoom-container"><img src="img/detail/demo4.png" /></div> </div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</div>
<div class="list">
<div class="falist" id="listBox">
<ul>
<li id="keting" class="active">
客厅(<span>4</span>)
</li>
<li id="huxing">
户型图(<span>2</span>)
</li>
<li id="woshi">
卧室(<span>1</span>)
</li>
<li id="chufang">
厨房(<span>1</span>)
</li>
<li id="yushi">
浴室(<span>2</span>)
</li>
<li id="yangtai">
阳台(<span>1</span>)
</li>
</ul>
</div>
</div>
</body>
</html>
style样式控制
body,
html {
background: #333;
overflow: hidden;
height: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 2.5rem;
overflow: auto;
}
.lunbo {
position: relative;
width: 100%;
height: 11.8%;
top: 4rem;
left: 0;
z-index: 8;
}
.swiper-container {
width: 100%;
height: 11.8rem;
position: relative;
}
.swiper-pagination-fraction {
z-index: 12;
width: 2.25rem;
height: 0.9rem;
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
left: inherit;
background: rgba(0, 0, 0, 0.25);
text-align: center;
color: #fff;
border-radius: 0.45rem;
font-size: 0.6rem;
}
.swiper-pagination-fraction span {
height: 0.9rem;
display: inline-block;
line-height: 0.9rem;
}
.list {
/*display: none;*/
position: fixed;
bottom: 0.25rem;
left: 0;
width: 100%;
z-index: 103;
}
.list .falist {
width: 18.75rem;
height: 2rem;
margin: 0 auto;
position: relative;
left: 0;
bottom: 0;
overflow: hidden;
}
.list .falist ul {
position: absolute;
left: 0;
bottom: 0;
width: 200%;
}
.list .falist ul li {
width: 3.75rem;
height: 2rem;
text-align: center;
line-height: 2rem;
float: left;
color: #fff;
}
.list .falist ul li a{
display: block;
}
.list .falist ul li.active {
width: 3.75rem;
background: #F5A00A;
border-radius: 2px;
}
.list .falist ul li a {
display: block;
width: 100%;
height: 100%;
color: #fff;
}
.list .falist ul li a span {
color: #fff;
padding: 0 0.1rem;
}
detail.js
$(function() {
//轮播图的首次
var mySwiper = new Swiper('#allList', {
loop: false,
zoom : true,//定义放大缩小
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
type: "fraction"
},
on: {
slideChangeTransitionStart: function() {
var k = this.activeIndex;//切换结束时，告诉我现在是第几个slide
var swiperId = $(".lunbo .swiper-slide").eq(k).attr("id");
var lisiId = $('.list .falist ul li.active').attr("id");
if(swiperId != lisiId){//获取到想对应id的列表项下表
$(".list .falist ul li").each(function() {
if($(this).attr("id") == swiperId ){
// alert($(this).index())
Change($(this).index());
}
})
}
//
},
},
})
// 点击切换轮播图片
$('.list .falist ul li').click(function(e) {
e.stopPropagation(); //阻止 的 click 事件冒泡
e.preventDefault(); //阻止提交按钮的默认行为（提交表单）
//控制轮播器的滑动
var j = 0;
var lisiId = $(this).attr("id");
$(".lunbo .swiper-slide").each(function() {
var swiperId = $(this).attr("id");
if(lisiId == swiperId) {
j = $(this).index();
return false //跳出本循环
}
})
mySwiper.slideTo(j, 1000, false);
//控制底部列表滑动的小标
var i = $(this).index();
Change(i);
})
//列表的滑动
function G(s) {
return document.getElementById(s);
}
// js获取css样式 封装getStyle （获取样式currentStyle getComputedStyle兼容处理）
function getStyle(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
//定义定时器，过度时间的设定
var timer = null;
function Animate(obj, json) {
if(obj.timer) {
clearInterval(obj.timer);
}
obj.timer = setInterval(function() {
for(var attr in json) {
var iCur = parseInt(getStyle(obj, attr));
iCur = iCur ? iCur : 0;
var iSpeed = (json[attr] - iCur) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
obj.style[attr] = iCur + iSpeed + 'px';
//console.log(obj.style[attr])
if(iCur == json[attr]) {
clearInterval(obj.timer);
}
}
}, 30);
}
var oList = G("listBox");
var oListLi = oList.getElementsByTagName("li");
var len2 = oListLi.length; // 列表的各项个数
var oListUl = oList.getElementsByTagName("ul")[0];
var w2 = parseInt($(".list .falist ul li").width()); //列表中项目的宽度；
var num = 5; //显示页面的个数
var num2 = Math.ceil(num / 2);
// 点击后 偏移的像素
function Change(index) {
$(".list .falist ul li").eq(index).addClass("active").siblings().removeClass("active");
if(index < num2) {
Animate(oListUl, {
left: 0
});
} else if(index + num2 <= len2) {
Animate(oListUl, {
left: -(index - num2 + 1) * w2
});
} else {
Animate(oListUl, {
left: -(len2 - num) * w2
});
// console.log(- (len2 - num) * w2)
}
}
//列表的长度控制
function fnList() {
var liWid = $(".list .falist ul li").width();
var lise = $(".list .falist ul li").size();
$(".list .falist ul").width(liWid * lise);
}
fnList()
})
