<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>移动端轮播图</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* 禁用iPhone中Safari的字号自动调整 */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
/* 字体大小设置为 100px */
font-size: 100px;
}
html ，body {
100%;
height: 100%;
overflow-x: hidden;
}
input {
-webkit-appearance: none;
resize: none;
}
.jd-banner {
100%;
overflow: hidden;
position: relative;
max- 7.5rem;
margin: 0 auto;
}
.jd-banner ul:first-child {
1000%;
overflow: hidden;
/*显示*/
transform: translateX(-10%);
-webkit-transform: translateX(-10%);
}
.jd-banner ul:first-child li {
10%;
float: left;
}
.jd-banner ul:first-child li img {
100%;
display: block;
}
/* 小圆点 */
.jd-banner ul:last-child {
1.4rem;
height: .1rem;
position: absolute;
left: 50%;
margin-left: -.6rem;
bottom: .1rem;
}
.jd-banner ul:last-child li {
.1rem;
height: .1rem;
margin-left: .08rem;
border-radius: .05rem;
border: 1px solid #fff;
float: left;
}
.jd-banner ul:last-child li:first-child {
margin-left: 0;
}
.jd-banner ul:last-child li.on {
background: #fff;
}
</style>
</head>
<body>
<div class="jd-banner">
<ul>
<li>
<a href="#">
<img src="http://img62.ddimg.cn/upload_img/00698/123/8-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img61.ddimg.cn/upload_img/00698/123/1-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img62.ddimg.cn/upload_img/00698/123/2-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img63.ddimg.cn/upload_img/00698/123/3-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img62.ddimg.cn/upload_img/00698/123/4-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img63.ddimg.cn/upload_img/00698/123/5-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img60.ddimg.cn/upload_img/00698/123/6-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img61.ddimg.cn/upload_img/00698/123/7-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img62.ddimg.cn/upload_img/00698/123/8-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img61.ddimg.cn/upload_img/00698/123/1-1525329877.jpg" alt="">
</a>
</li>
</ul>
<ul>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script src="swipe.js"></script>
<script>
/*轮播图*/
var scrollPic = function() {
// banner
var banner = document.getElementsByClassName("jd-banner")[0];
// 图片的宽度
var width = banner.offsetWidth;
//图片盒子
var imgBox = banner.getElementsByTagName("ul")[0];
//小圆点盒子
var pointBox = banner.getElementsByTagName("ul")[1];
//点数组
var pointList = pointBox.getElementsByTagName("li");
var index = 1;
var timer;
var startX = 0;
var moveX = 0;
var endX = 0;
//定义一个过渡函数
var addTransition = function() {
imgBox.style.transition = "all .3s ease 0s";
imgBox.style.webkitTransition = "all .3s ease 0s";
}
//去掉过渡函数
var removeTransition = function() {
imgBox.style.transition = "none";
imgBox.style.webkitTransition = "none";
}
//改变位置
var setTransform = function(t) {
imgBox.style.transform = "translate(" + t + "px)";
imgBox.style.webkitTransform = "translate(" + t + "px)";
}
//小圆点变化
var setpoint = function(n) {
for(var i = 0; i < pointList.length; i++) {
pointList[i].className = '';
};
if(n >= 9) {
n = 1;
} else if(n <= 0) {
n = 8;
}
pointList[n - 1].className = 'on';
}
//定时器
timer = setInterval(function() {
index++;
addTransition();
setTransform(-index * width);
setpoint(index);
}, 3000)
//监听函数
imgBox.addEventListener('transitionEnd', function() {
if(index >= 9) {
index = 1;
} else if(index <= 0) {
index = 8;
}
removeTransition();
setTransform(-index * width);
}, 300)
imgBox.addEventListener('webkitTransitionEnd', function() {
if(index >= 9) {
index = 1;
} else if(index <= 0) {
index = 8;
}
removeTransition();
setTransform(-index * width);
}, 300)
//触摸事件开始
imgBox.addEventListener('touchstart', function(e) {
//console.log('strat');
// 记录开始的位置
startX = e.touches[0].clientX;
})
//触摸滑动事件开始
imgBox.addEventListener('touchmove', function(e) {
//清除定时器
clearInterval(timer);
// 清除默认的滚动事件
e.preventDefault();
// 记录开始的位置
endX = e.touches[0].clientX;
//记录移动的位置
moveX = startX - endX;
removeTransition();
setTransform(-index * width - moveX)
})
//触摸滑动事件结束
imgBox.addEventListener('touchend', function(e) {
//如果移动的距离大雨三分之一是
if(Math.abs(moveX) > (1 / 3 * width) && endX != 0) {
// 向左
if(moveX > 0) {
index++;
} else {
index--;
}
// 改变位置
setTransform(-index * width);
setpoint(index);
}
// 回到原来的位置
addTransition();
setTransform(-index * width);
startX = 0;
endX = 0;
clearInterval(timer);
//定时器
timer = setInterval(function() {
index++;
addTransition();
setTransform(-index * width);
setpoint(index);
}, 3000)
})
}
scrollPic();
</script>