首页 > 代码库 > 移动端原生js，css3实现轮播图
移动端原生js，css3实现轮播图
一、功能需求
1、自动播放
2、滑动切换
3、点击切换
二、思路分析
html代码：
<div class="container">
<ul class="list clearfix">
<li class="item fl item5">图5</li>
<li class="item fl item1">图1</li>
<li class="item fl">图2</li>
<li class="item fl">图3</li>
<li class="item fl">图4</li>
<li class="item fl item5">图5</li>
<li class="item fl item1">图1</li>
</ul>
<ul class="list-btn clearfix">
<li class="btn choosed"></li>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
</ul>
</div>
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
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
工作中这样的轮播图很常见，虽然网上插件有很大可以实现这个效果，但是自己动手敲出来感觉会不一样。希望能对朋友们有帮助。
移动端原生js，css3实现轮播图