原生js移动h5端简单可滑动轮播图(rem适配)
很多移动端轮播图是需要这个触摸滑动的功能,js中映射就是touch、touchmove、touchend这三个事件,看看效果图
直接放代码
html
<!-- 轮播图区域 -->
<div id="banner-area">
<div id="banners-img">
<div class="img-area">
<img src="./images/banner/banner1.jpg" alt="轮播图" />
</div>
<div class="img-area">
<img src="./images/banner/banner2.jpg" alt="轮播图" />
</div>
<div class="img-area">
<img src="./images/banner/banner3.jpg" alt="轮播图" />
</div>
<div class="img-area">
<img src="./images/banner/banner4.png" alt="轮播图" />
</div>
<div class="img-area">
<img src="./images/banner/banner5.png" alt="轮播图" />
</div>
</div>
<!-- 图片导航 -->
<div id="banner-nav">1/5</div>
</div>
css/less
less写法
/*banner区域 start*/
#banner-area {
position: relative;
width: 100%;
height: 5rem;
.common-br;
//图片区域
#banners-img {
width: 500%;
height: 100%;
.img-area {
float: left;
width: 20%;
height: 100%;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
// 数字显示
#banner-nav {
position: absolute;
bottom: 0.3rem;
right: 0.3rem;
width: 1.5rem;
height: 0.8rem;
font-size: 0.3rem;
line-height: 0.8rem;
text-align: center;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 0.4rem;
}
}
/*banner区域 end*/
css写法
/*banner区域 start*/
#banner-area {
position: relative;
width: 100%;
height: 5rem;
margin-bottom: 0.5rem;
border-radius: 0.2rem;
overflow: hidden;
}
#banner-area #banners-img {
width: 500%;
height: 100%;
}
#banner-area #banners-img .img-area {
float: left;
width: 20%;
height: 100%;
cursor: pointer;
}
#banner-area #banners-img .img-area img {
width: 100%;
height: 100%;
}
#banner-area #banner-nav {
position: absolute;
bottom: 0.3rem;
right: 0.3rem;
width: 1.5rem;
height: 0.8rem;
font-size: 0.3rem;
line-height: 0.8rem;
text-align: center;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 0.4rem;
}
/*banner区域 end*/
顺带放上rem的适配
html {
//html字体大小校准rem
font-size: 50px;
}
//根据效果图750px划分15份
@copies: 15;
//媒体查询 min-width 小->大
//320px iphone5
@media screen and (min-width: 320px) {
html {
font-size: (320px / @copies);
}
}
//360px G4/S5
@media screen and (min-width: 360px) {
html {
font-size: (360px / @copies);
}
}
// 375px iphone 678
@media screen and (min-width: 375px) {
html {
font-size: (375px / @copies);
}
}
// 384 Nesux4
@media screen and (min-width: 384px) {
html {
font-size: (384px / @copies);
}
}
// 411 pixel2
@media screen and (min-width: 411px) {
html {
font-size: (411px / @copies);
}
}
// 414 iphone 678 plus
@media screen and (min-width: 414px) {
html {
font-size: (414px / @copies);
}
}
// 424
@media screen and (min-width: 424px) {
html {
font-size: (424px / @copies);
}
}
// 480
@media screen and (min-width: 480px) {
html {
font-size: (480px / @copies);
}
}
// 540
@media screen and (min-width: 540px) {
html {
font-size: (540px / @copies);
}
}
// 720
@media screen and (min-width: 720px) {
html {
font-size: (720px / @copies);
}
}
// 750
@media screen and (min-width: 750px) {
html {
font-size: (750px / @copies) ;
}
}
js
window.onload = () => {
/**
* 1. 定时器自动轮播
* 2. 右下角的数字可以根据图片进行改变
* 3. 手指滑动轮播图 touch事件 用css3控制轮播图的定位
* 4. 自动吸附 ->滑动距离达不到一定的值
* 5. 上一张/下一张 ->滑动距离超过了就上一张/下一张
*/
var bannerArea = document.querySelector("#banner-area"); //轮播图区域盒子
var width = bannerArea.offsetWidth; //轮播图区域宽度
var bannerImg = bannerArea.querySelector("#banners-img"); //图片区域
var imgCount = bannerImg.childElementCount;
var bannerNav = document.querySelector("#banner-nav"); //数字指示
//添加过渡方法
var addTransition = () => {
bannerImg.style.transition = "all 0.3s";
};
//清除过渡
var removeTransition = () => {
bannerImg.style.transition = "none";
};
//设置图片位置 x轴 transform改变图片横向位置
var setTransform = (transitionX) => {
console.log("tranX\t" + transitionX);
bannerImg.style.transform = `translateX(${transitionX}px)`;
};
//第几张
let index = 0;
//自动轮播函数
function autoPlay() {
index++; //下一张
addTransition();
setTransform(-index * width); //计算移动到第几张
if (index >= imgCount) {
//重置
index = 0;
bannerImg.style.transform = `translateX(0px)`;
}
//更改指示
setNav(index);
}
//自动轮播
var timer = setInterval(() => {
autoPlay();
}, 2000);
//数字导航
function setNav(index) {
bannerNav.innerHTML = `${index + 1}/${imgCount}`;
}
//滑动事件 ->touch
var startX = 0; //触摸起始位置
var moveX = 0; //滑动时x的位置
var distanceX = 0; //滑动的距离
var isMove = false; //是否滑动过
//开始触摸
bannerImg.addEventListener("touchstart", (e) => {
clearInterval(timer); //停止运动
// console.log(e);
startX = e.touches[0].clientX; //记录X位置
});
//滑动中 轮播图要跟着动
bannerImg.addEventListener("touchmove", (e) => {
moveX = e.touches[0].clientX;
distanceX = moveX - startX; //滑动的距离
removeTransition(); //停止过渡
setTransform(-index * width + distanceX); //跟着动
isMove = true; //正在滑动
});
//滑动结束 吸附
bannerImg.addEventListener("touchend", (e) => {
//滑动距离要大于屏幕1/4
if (isMove && Math.abs(distanceX) > width / 4) {
//判断向左还是右
if (distanceX > 0) {
index--;
console.log("向右滑", index);
} else {
index++;
console.log("向左滑", index);
}
}
//吸附效果
addTransition();
console.log(index);
if (index >= imgCount) {
//重置
index = 0;
bannerImg.style.transform = `translateX(0px)`;
} else if (index < 0) {
index = imgCount - 1;
console.log("右滑,目前" + index);
}
setTransform(-index * width);
//更改数字
setNav(index);
//重置
startX = 0;
moveX = 0;
distanceX = 0;
isMove = false;
clearInterval(timer); //严谨 再清除一次定时器
timer = setInterval(function () {
autoPlay();
}, 2000);
});
};