原生js实现移动端轮播图

87 阅读 0 评论 58 点赞

我是靠谱客的博主炙热保温杯，最近开发中收集的这篇文章主要介绍原生js实现移动端轮播图，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

大家一起复制以下代码查看效果吧!

htm代码


<div id="box">
<ul id="one">
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/1.jpg" alt=""></li>
</ul>
<!-- 小圆点 -->
<ol id="two">
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>

css代码

<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#box{
width: 500px;
height: 200px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
#one{
width: 500px;
height: 200px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
}
#one li{
float: left;
}
#one img{
width: 100%;
}
/* 小圆点 */
#two{
position: absolute;
right: 10px;
bottom: 10px;
}
#two li{
float: left;
width: 12px;
height: 12px;
background-color: red;
margin-right: 5px;
}
.current{
background-color: orange;
}
</style>

js实现代码

<script type="text/javascript">
function mFun$(id){
return document.getElementById(id);
}
// if ('addEventListener' in document) {
//
document.addEventListener('DOMContentLoaded', function() {
//
FastClick.attach(document.body);
//
}, false);
// }
// mFun$('box').addEventListener('click',function(){
//
console.log(11);
// })
//获取相框宽度
var imgWidth=mFun$('box').offsetWidth;
//获取ul
var ul=mFun$('one');
//获取图片数
var imgs=ul.querySelectorAll('img');
//给ul设置width
ul.style.width=imgWidth*imgs.length+'px';
//利用定时器自动轮播图片
var index=0;
var timer=setInterval(function(){
index++;
var translateX=-index*imgWidth;
//css3过渡实现
ul.style.transition='all .3s'
ul.style.transform='translateX('+translateX+'px)'
},2000)
//无缝滚动（等着过渡完成以后再去判断） transitionend过渡完成事件
ul.addEventListener('transitionend',function(){
//无缝滚动
if(index>=3){
index=0;
//去除过渡效果
ul.style.transition='none';
var translateX=-index*imgWidth;
ul.style.transform='translateX('+translateX+'px)';
}else if(index<0){
index=2;
ul.style.transition='none';
var translateX=-index*imgWidth;
ul.style.transform='translateX('+translateX+'px)';
}
//获取ol下的li
var lis=mFun$('two').querySelectorAll('li');
mFun$('two').querySelector('.current').classList.remove('current');
lis[index].classList.add('current');
});
//手指滑动轮播图
//获取手指的初始坐标
var startX=0;
var moveX=0;
var flag=false; //节流阀（严谨操作）
ul.addEventListener('touchstart',function(e){
var e=e||window.event;
startX=e.targetTouches[0].pageX;
})
//touchmove
ul.addEventListener('touchmove',function(e){
//计算移动距离
moveX=e.targetTouches[0].pageX-startX;
//移动盒子：盒子原来的位置+手指移动的距离
var translateX=-index*imgWidth+moveX;
//手指拖动的时候，不需要动画效果所以要取消过渡效果
ul.style.transform='none';
ul.style.transform='translateX('+translateX+'px)';
flag=true;
e.preventDefault(); //阻止滚动屏幕的行为
});
//手指离开，根据移动距离去判断是回弹还是播放上一张下一张
ul.addEventListener('touchend',function(e){
if(flag){
if(Math.abs(moveX)>50){
//如果是右滑就是播放上一张
if(moveX>0){
index--;
}else{
index++;
}
var translateX=-index*imgWidth;
ul.style.transition='all .3s';
ul.style.transform='translateX('+translateX+'px)';
}else{
//如果移动距离小于50px实现回弹
var translateX=-index*imgWidth;
ul.style.transition='all .3s';
ul.style.transform='translateX('+translateX+'px)';
}
//手指离开的时候请重新开启定时器
clearInterval(timer);
var timer=setInterval(function(){
index++;
var translateX=-index*imgWidth;
//css3过渡实现
ul.style.transition='all .3s'
ul.style.transform='translateX('+translateX+'px)'
},2000)
}
});
</script>

完整代码复制这里

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="user-scalable-no"/>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#box{
width: 500px;
height: 200px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
#one{
width: 500px;
height: 200px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
}
#one li{
float: left;
}
#one img{
width: 100%;
}
/* 小圆点 */
#two{
position: absolute;
right: 10px;
bottom: 10px;
}
#two li{
float: left;
width: 12px;
height: 12px;
background-color: red;
margin-right: 5px;
}
.current{
background-color: orange;
}
</style>
<!-- <script src="fastclick.js"></script> -->
</head>
<body>
<div id="box">
<ul id="one">
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/1.jpg" alt=""></li>
</ul>
<!-- 小圆点 -->
<ol id="two">
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>
<script type="text/javascript">
function mFun$(id){
return document.getElementById(id);
}
// if ('addEventListener' in document) {
//
document.addEventListener('DOMContentLoaded', function() {
//
FastClick.attach(document.body);
//
}, false);
// }
// mFun$('box').addEventListener('click',function(){
//
console.log(11);
// })
//获取相框宽度
var imgWidth=mFun$('box').offsetWidth;
//获取ul
var ul=mFun$('one');
//获取图片数
var imgs=ul.querySelectorAll('img');
//给ul设置width
ul.style.width=imgWidth*imgs.length+'px';
//利用定时器自动轮播图片
var index=0;
var timer=setInterval(function(){
index++;
var translateX=-index*imgWidth;
//css3过渡实现
ul.style.transition='all .3s'
ul.style.transform='translateX('+translateX+'px)'
},2000)
//无缝滚动（等着过渡完成以后再去判断） transitionend过渡完成事件
ul.addEventListener('transitionend',function(){
//无缝滚动
if(index>=3){
index=0;
//去除过渡效果
ul.style.transition='none';
var translateX=-index*imgWidth;
ul.style.transform='translateX('+translateX+'px)';
}else if(index<0){
index=2;
ul.style.transition='none';
var translateX=-index*imgWidth;
ul.style.transform='translateX('+translateX+'px)';
}
//获取ol下的li
var lis=mFun$('two').querySelectorAll('li');
mFun$('two').querySelector('.current').classList.remove('current');
lis[index].classList.add('current');
});
//手指滑动轮播图
//获取手指的初始坐标
var startX=0;
var moveX=0;
var flag=false; //节流阀（严谨操作）
ul.addEventListener('touchstart',function(e){
var e=e||window.event;
startX=e.targetTouches[0].pageX;
})
//touchmove
ul.addEventListener('touchmove',function(e){
//计算移动距离
moveX=e.targetTouches[0].pageX-startX;
//移动盒子：盒子原来的位置+手指移动的距离
var translateX=-index*imgWidth+moveX;
//手指拖动的时候，不需要动画效果所以要取消过渡效果
ul.style.transform='none';
ul.style.transform='translateX('+translateX+'px)';
flag=true;
e.preventDefault(); //阻止滚动屏幕的行为
});
//手指离开，根据移动距离去判断是回弹还是播放上一张下一张
ul.addEventListener('touchend',function(e){
if(flag){
if(Math.abs(moveX)>50){
//如果是右滑就是播放上一张
if(moveX>0){
index--;
}else{
index++;
}
var translateX=-index*imgWidth;
ul.style.transition='all .3s';
ul.style.transform='translateX('+translateX+'px)';
}else{
//如果移动距离小于50px实现回弹
var translateX=-index*imgWidth;
ul.style.transition='all .3s';
ul.style.transform='translateX('+translateX+'px)';
}
//手指离开的时候请重新开启定时器
clearInterval(timer);
var timer=setInterval(function(){
index++;
var translateX=-index*imgWidth;
//css3过渡实现
ul.style.transition='all .3s'
ul.style.transform='translateX('+translateX+'px)'
},2000)
}
});
</script>
</body>
</html>