本文实例为大家分享了js实现移动端轮播图的具体代码，供大家参考，具体内容如下
这是结构
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./css/jd_phnoe.css" rel="external nofollow" > <link rel="stylesheet" href="./css/base.css" rel="external nofollow" > <title>Document</title> <script src="./js/jd_phnoe.js"></script></head><body> <div class="jd_layout"> <div class="jd_banner"> <ul class="jd_bannerimg clearfix"> <li> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l1.jpg" </li> <li> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l2.jpg" </li> <li> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l3.jpg" </li> <li> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l4.jpg" </li> <li> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l5.jpg" </li> <li> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l6.jpg" </li> <li> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l7.jpg" </li> <li> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l8.jpg" </li> </ul> <!-- 点标记 --> <ul class="jd_bannerIndicator clearfix"> <li></li> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div></body></html>
这是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%; /*1.设置为块元素 2.可以将文本的字体大小设置为0 3.vertical-align:bottom*/ 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%; /* opacity: 0.7; */ margin: 0 3px; /* cursor: pointer; */}.jd_bannerIndicator li:first-of-type{ margin-left: 0px;}.jd_bannerIndicator >li.active{ background-color: #fff;} dase
/*公共样式*//*1.样式重置*/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{ /*1.清除文本框获取焦点时默认的边框阴影*/ outline: none; /*2.去除边框*/ border: none; /*3.添加边框*/ border: 1px solid #ccc;}/*2.添加新的样式*/.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(){ /*1.设置修改轮播图的页面结构 * a.在开始位置添加原始的最后一张图片 * b.在结束位置添加原始的第一张图片*/ /*1.1.获取轮播图结构*/ var banner=document.querySelector(".jd_banner"); /*1.2.获取图片容器*/ 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); //克隆添加图片 /*1.5.在首尾插入两张图片 cloneNode:复制一个dom元素*/ imgBox.appendChild(first.cloneNode(true)); /*1.6insertBefore(需要插入的dom元素，位置)*/ imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild); //获取对应的样式 //2.1获取li的位置 var lis=imgBox.querySelectorAll("li"); /*2.2 获取li元素的数量*/ var count=lis.length; /*2.3.获取banner的宽度*/ var bannerWidth=banner.offsetWidth; /*2.4 设置图片盒子的宽度*/ imgBox.style.width=count*bannerWidth+"px"; /*2.5 设置每一个li(图片)元素的宽度*/ for(var i=0; i < lis.length;i++){ lis[i].style.width=bannerWidth+"px"; } /*定义图片索引:图片已经有一个宽度的默认偏移*/ var index=1; /*3.设置默认的偏移*/ imgBox.style.left=-bannerWidth+"px"; /*4.当屏幕变化的时候，重新计算宽度*/ 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"; } /*将上一次move所产生的数据重置为0*/ startX=0; moveX=0; distanceX=0; }); /*webkitTransitionEnd:可以监听当前元素的过渡效果执行完毕，当一个元素的过渡效果执行完毕的时候，会触发这个事件*/ imgBox.addEventListener("webkitTransitionEnd",function(){ console.log(index,33333); /*如果到了最后一张(count-1)，回到索引1*/ /*如果到了第一张(0)，回到索引count-2*/ 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"); } } 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。
注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。
