移动端轮播图
Posted tuziling
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端轮播图相关的知识，希望对你有一定的参考价值。
这是结构
<!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"> <link rel="stylesheet" href="./css/base.css"> <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:;"> <img src="./uploads/l1.jpg" alt="" /> </a> </li> <li> <a href="javascript:;"> <img src="./uploads/l2.jpg" alt="" /> </a> </li> <li> <a href="javascript:;"> <img src="./uploads/l3.jpg" alt="" /> </a> </li> <li> <a href="javascript:;"> <img src="./uploads/l4.jpg" alt="" /> </a> </li> <li> <a href="javascript:;"> <img src="./uploads/l5.jpg" alt="" /> </a> </li> <li> <a href="javascript:;"> <img src="./uploads/l6.jpg" alt="" /> </a> </li> <li> <a href="javascript:;"> <img src="./uploads/l7.jpg" alt="" /> </a> </li> <li> <a href="javascript:;"> <img src="./uploads/l8.jpg" alt="" /> </a> </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"); } }
以上是关于移动端轮播图的主要内容，如果未能解决你的问题，请参考以下文章