js实现移动端轮播图
程序员文章站
2022-03-13 17:03:17
本文实例为大家分享了js实现移动端轮播图的具体代码,供大家参考,具体内容如下
这是结构
本文实例为大家分享了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" alt="" /> </a> </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" alt="" /> </a> </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" alt="" /> </a> </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" alt="" /> </a> </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" alt="" /> </a> </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" alt="" /> </a> </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" alt="" /> </a> </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" 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"); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: C#之委托