首页 > 代码库 > 移动端原生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实现轮播图