js实现移动端轮播图

本文实例为大家分享了js实现移动端轮播图的具体代码，供大家参考，具体内容如下

这是结构

这是CSS

.jd_layout{
 width: 100%;
 max-width: 640px;
 min-width: 320px;
 height: auto;
 margin: 0px auto;
 background-color: #ccc;
}


.jd_banner{
 width: 100%;
 overflow: hidden;
 position: relative;
}
.jd_bannerimg{
 width: 1000%;
 position: relative;
}
.jd_bannerimg > li{
 width: 10%;
 float: left; 
}
.jd_bannerimg>li img{
 width: 100%;
 
 display: block;
}

.jd_bannerIndicator{
 position: absolute;
 left: 50%;
 bottom: 5px;
 transform: translateX(-50%);
}
.jd_bannerIndicator li{
 width: 6px;
 height: 6px;
 float: left;
 border: 1px solid #fff;
 border-radius: 50%;
 
 margin: 0 3px;
 
}
.jd_bannerIndicator li:first-of-type{
 margin-left: 0px;
}
.jd_bannerIndicator >li.active{
 background-color: #fff;
}

dase

html,body,ul,li,img,a,p,div,form,input,h3{
 padding: 0;
 margin: 0;
 
 box-sizing: border-box;
 
 -webkit-tap-highlight-color: transparent;
}
body{
 font-family: "微软雅黑",sans-serif;
 font-size: 13px;
}
a,
a:hover{
 color: #666;
 text-decoration: none;
}
ul{
 list-style: none;
}
input{
 
 outline: none;
 
 border: none;
 
 border: 1px solid #ccc;
}


.f_left{
 float: left;
}
.f_right{
 float: right;
}
.m_left10{
 margin-left: 10px;
}
.m_right10{
 margin-right: 10px;
}
.m_top10{
 margin-top: 10px;
}
.clearfix::before,
.clearfix::after{
 content: "";
 display: block;
 height: 0;
 line-height: 0px;
 clear: both;
 visibility: hidden;
}

js

window.onload = function () {
 banner();
}

//轮播图
function banner(){
 
 
 var banner=document.querySelector(".jd_banner");
 
 var imgBox=banner.querySelector("ul:first-of-type");
 //1.3 获取第一张图片
 var first=imgBox.querySelector("li:first-of-type");
 //1.4获取最后一张图
 var last=imgBox.querySelector("li:last-of-type");
 // console.log(first);
 // console.log(last);
 //克隆添加图片
 
 imgBox.appendChild(first.cloneNode(true));
 
 imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);
 //获取对应的样式
 //2.1获取li的位置
 var lis=imgBox.querySelectorAll("li");
 
 var count=lis.length;
 
 var bannerWidth=banner.offsetWidth;
 
 imgBox.style.width=count*bannerWidth+"px";
 
 for(var i=0; i < lis.length;i++){
 lis[i].style.width=bannerWidth+"px";
 }
 
 var index=1;
 
 imgBox.style.left=-bannerWidth+"px";
 
 window.onresize=function(){
 bannerWidth=banner.offsetWidth+"px";
 imgBox.style.width=count*bannerWidth+"px";
 for(var i = 0; i < lis.length;i++){
 lis[i].style.width=bannerWidth+"px";
 }
 imgBox.style.left=-index*bannerWidth+"px";
 }
 //自动轮播
 var timerId;
 var strtime=function(){
 timerId=setInterval(function(){
 index++;
 //添加过度效果
 imgBox.style.transition="left 0.5s ease-in-out"
 //设置偏移量
 imgBox.style.left=(-index*bannerWidth)+"px";
 setTimeout(function(){
 //当走到最后一张时候,我就让他等于最后一张
 if(index==count-1){
 index=1;
 // 清除过度效果
 imgBox.style.transition="none";
 
 imgBox.style.left=(-index*bannerWidth)+"px";
 }
 },500)
 },1500)
 }
 //自动播放调用
 strtime();
 //实现手动轮播
 var startX,moveX,distanceX;
  
 var isEnd = true; 
 imgBox.addEventListener("touchstart",function(e){
 //停止定时器
 clearInterval(timerId);
 //console.log(e);
 startX=e.targetTouches[0].clientX; 
 });
 //为图片添加触摸过程,滑动图片
 imgBox.addEventListener("touchmove",function(e){
 if(isEnd==true){
 //console.log(123);
 
 
 moveX=e.targetTouches[0].clientX;
 
 distanceX=moveX-startX;
 //清除过度效果
 imgBox.style.transition="none";
 //基于之前轮播图偏移的位置
 imgBox.style.left=(-index*bannerWidth + distanceX)+"px";
 }
 })
 
 imgBox.addEventListener("touchend",function(e){
 //获取滑动距离,判断是否超过100px
 isEnd=false;
 if(Math.abs(distanceX) > 50){
 //判断滑动方向
 if(distanceX > 0){//上一张
 index--;
 }else{//下一张
 index++;
 }
 //过度效果
 imgBox.style.transition="left 0.5s ease-in-out";
 //偏移位置
 imgBox.style.left=-index*bannerWidth+"px";
 }else if(Math.abs(distanceX) > 0){//回弹效果
 //过度效果
 imgBox.style.transition="left 0.5s ease-in-out";
 //偏移位置
 imgBox.style.left=-index*bannerWidth+"px";
 }
 
 startX=0;
 moveX=0;
 distanceX=0;
 
 });
 
 imgBox.addEventListener("webkitTransitionEnd",function(){
 console.log(index,33333);
 
 
 
 if(index==count-1){
 index=1;
 imgBox.style.transition="none";
 imgBox.style.left=-index*bannerWidth+"px";
 }else if(index==0){
 index=count-2;
 imgBox.style.transition="none";
 imgBox.style.left=-index*bannerWidth+"px";
 }
 yuandian(index);
 setTimeout(function () {
 isEnd=true;
 clearInterval(timerId);
 strtime();
 },100)
 });

 // //圆点排他
 var yuandian=function (index) {
 //先找到所有的li 进行遍历移除所有样式,为自己加上样式
 var lis=banner.querySelector("ul:last-of-type").querySelectorAll("li");
 for(var i = 0; i < lis.length; i++){
 lis[i].classList.remove("active");
 }
 lis[index-1].classList.add("active");
 }
 

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。