如果可以引用庫恤筛，建議使用swiper.js官还，方便，功能強大
以下代碼僅供參考毒坛，適用于不想引用代碼庫妻枕，想要簡單實現(xiàn)移動端無縫滑動的同學
demo.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<title>swiperDemo</title>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
visibility: hidden;
height: 0;
clear: both;
}
.box {
height: 50vh;
width: 100vw;
background: #999;
text-align: center;
border-left: 1px solid red;
}
.wrpa-w {
padding-top: 0 !important;
}
.banner {
width: 100%;
position: relative;
overflow: hidden;
z-index: 5;
}
.banner .container {
width: 1000%;
-webkit-transform: translateX(-10%);
transform: translateX(-10%);
}
.banner .container li {
width: 10%;
float: left;
}
.banner .point {
position: absolute;
height: 6px;
left: 40%;
bottom: 5px;
}
.banner .point li {
float: left;
width: 5px;
height: 5px;
background: silver;
margin-right: 10px;
border-radius: 2px;
}
.banner .point li:last-child {
margin-right: 0;
}
.active {
background: white !important;
}
</style>
</head>
<body>
<div class="banner">
<ul class="clearfix container">
<li>
<div class="box">過渡的555</div>
</li>
<li>
<div class="box">1111</div>
</li>
<li>
<div class="box">2222</div>
</li>
<li>
<div class="box">3333</div>
</li>
<li>
<div class="box">444</div>
</li>
<li>
<div class="box">555</div>
</li>
<li>
<div class="box">過渡的1111</div>
</li>
</ul>
<!-- 對應(yīng)的點是實際圖片的個數(shù) -->
<ul class="point">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script>
// 頁面首次加載
window.onload = function () {
swipwerTransition();
};
//滑動結(jié)束
transitionEnd = function (dom, callback) {
if (dom && typeof dom == 'object') {
dom.addEventListener('webkitTransitionEnd', function () {
callback && callback();
});
dom.addEventListener('transitionEnd', function () {
callback && callback();
});
}
};
// 初始化方法
function swipwerTransition() {
var banner = document.querySelector('.banner');
var width = banner.offsetWidth;
var imageBox = banner.querySelector('.container');
var pointBox = banner.querySelector('.point');
var points = pointBox.querySelectorAll('li');
var index = 1; //初始化圖片角標
points[index - 1].className = 'active'; //點對應(yīng)位置
var imgLength = points.length; //輪播圖個數(shù)（打點個數(shù)）
//無縫滾動
transitionEnd(imageBox, function () {
if (index > imgLength) {
index = 1;
removeTransition();
translateX(-index * width);
} else if (index <= 0) {
index = imgLength;
removeTransition();
translateX(-index * width);
}
setPoint();
})
// 點對應(yīng)圖片
var setPoint = function () {
for (var i = 0; i < points.length; i++) {
points[i].className = "";
}
//判斷索引 動畫結(jié)束后設(shè)置點
points[index - 1].className = 'active';
}
// 圖片滑動實現(xiàn)
var startX = 0; //開始坐標
var moveX = 0; //移動時x的坐標
var distancex = 0; //移動距離
var isMove = false; //是否滑動過
imageBox.addEventListener('touchstart', function (e) {
startX = e.touches[0].clientX;
});
imageBox.addEventListener('touchmove', function (e) {
isMove = true;
moveX = e.touches[0].clientX;
distancex = moveX - startX;
removeTransition();
translateX(-index * width + distancex);
});
//滑動圖片邏輯處理（超過1/3換圖，可以自己設(shè)置）
imageBox.addEventListener('touchend', function (e) {
if (Math.abs(distancex) > (width / 3) && isMove) {
if (distancex > 0) {
index--;
} else {
index++;
}
addTransition();
translateX(-index * width);
} else {
addTransition();
translateX(-index * width);
}
isMove = false;
startX = 0;
moveX = 0;
distancex = 0;
})
/*公用方法*/
//添加過渡
var addTransition = function () {
imageBox.style.webkitTransition = 'all .3s ';
imageBox.style.transition = "all .3s";
}
//刪除過渡
var removeTransition = function () {
imageBox.style.webkitTransition = 'none';
imageBox.style.transition = "none";
}
// 設(shè)置定位
var translateX = function (x) {
imageBox.style.webkitTransform = 'translateX(' + x + 'px)';
imageBox.style.transform = 'translateX(' + x + 'px)';
}
}
</script>
