大家一起复制以下代码查看效果吧!
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>