移动端原生js，css3实现轮播图

Posted 2020-09-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端原生js，css3实现轮播图相关的知识，希望对你有一定的参考价值。

一、功能需求

1、自动播放
2、滑动切换
3、点击切换

二、思路分析

css代码：

/* 轮播图样式 */
.container{
width: 100%;
height: 6rem;
overflow: hidden;
position: relative;
}
.list{
height: 100%;
position: absolute;
width: 100rem;
background-color: pink;
transform: translateX(-10rem);
}
.item{
height: 100%;
width: 10rem;
text-align: center;
line-height: 3rem;
font-size: 2rem;
border: 1px solid #fff;

}
.item1{
background-color: yellowgreen;
}
.item5{
background-color: skyblue;
}

/* 按钮 */
.list-btn{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1rem;

}
.btn{
float: left;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
margin-right: 10px;
background-color: #fff;
}
.choosed{
background-color: blue;
}

总体思路：图片列表放在ul中，通过设置ul列表的位移来实现图片的切换

1、定时器实现自动播放

用索引值index来定位ul列表的translateX属性值，用定时器来控制index的增加。再根据index 的大小以及图片的宽度来计算ul列表的位移。为了解决首末图片闪动的问题，在首尾多加一张图片。详细请看html代码部分

2、滑动切换

利用touch事件，记录滑动距离，再根据滑动距离进行判断，当超过某个值的时候，实现图片的切换，低于该值的时候，则图片停留在原位置

3、点击按钮切换

点击选中按钮，展示对应图片。同时给相应的按钮添加被选中的背景色

三、重点来了

js代码，注释很清楚，有不明白的可留言

//实现功能：
//1、自动播放
//2、滑动切换
//3、点击切换
window.onload = function() {
//滑动图片，列表移动
var list = document.querySelector(‘.list‘);

//记录当前展示图片的索引值
var index = 1;
//1、自动播放
var timer; //定义定时器
autoSlide();

//2、滑动切换
//定义变量记录滑动起始坐标，滑动距离，滑动结束坐标
var startX = 0,
moveX = 0,
distacenX = 0,
srem = document.querySelector(‘html‘).style.fontSize;
list.addEventListener(‘touchstart‘, function(e) {
//滑动的时候清除定时器，清除渐变属性

clearInterval(timer);
removeTransition(list);

startX = e.touches[0].clientX;
});
list.addEventListener(‘touchmove‘, function(e) {
moveX = e.touches[0].clientX;

distanceX = moveX - startX;

distanceX = distanceX / parseInt(srem);

//根据滑动距离改变图片列表的位移
slideX(list, index * 10 - distanceX);
})
list.addEventListener(‘touchend‘, function(e) {
if (Math.abs(distanceX) >= 5 && distanceX < 0) {
index++;
}
if (Math.abs(distanceX) >= 5 && distanceX > 0) {

index--;
}

addTransition(list);
slideX(list, index * 10);

//滑动结束，判断是否到最后一张，或者是第一张
if (index == 6) {
index = 1;
setTimeout(function() {

removeTransition(list);
slideX(list, index * 10);
}, 500)

}

if (index == 0) {
setTimeout(function() {
index = 5;
removeTransition(list);
slideX(list, index * 10);
}, 500)
}

addBgc();
//滑动结束，添加定时器
autoSlide();
})

//3、点击切换
var btns = document.querySelectorAll(‘.btn‘);
btns.forEach(function(v, i) {
v.addEventListener(‘click‘, function(e) {
//给被点击的按钮加个背景色

//清除定时器
clearInterval(timer);
removeTransition(list);
index = i + 1;
slideX(list, index * 10);
//给按钮添加背景色
addBgc();
//恢复定时器
autoSlide();
})
})

//工具函数
//实现位移
function slideX(v, x) {

v.style.transform = ‘translateX(-‘ + x + ‘rem)‘;
v.style.webkitTransform = ‘translateX(-‘ + x + ‘rem)‘;
}
//添加渐变属性
function addTransition(v) {
v.style.transition = "all 0.5s";
v.style.webkitTransition = "all 0.5s";
}
//移除渐变属性
function removeTransition(v) {

v.style.transition = ‘none‘;
v.style.webkitTransition = ‘none‘;
}

//给按钮添加背景
function addBgc() {
btns.forEach(function(v, i) {
v.className = ‘btn‘;
if (i + 1 == index) {
v.className = ‘btn choosed‘;
}
})
}

//设置定时器，让图片轮播
function autoSlide() {
timer = setInterval(function() {

index++;
addTransition(list);
slideX(list, index * 10);
//给按钮添加背景色

if (index == 6) {
index = 1;
setTimeout(function() {

removeTransition(list);
slideX(list, index * 10);
}, 500)

}

addBgc();

}, 1000);
console.log(timer)
}

}

四、备注

因为用rem进行了适配，所以在js代码中，有相应的单位转换，px转rem