本文實(shí)例為大家分享了js實(shí)現(xiàn)移動(dòng)端輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
這是結(jié)構(gòu)
<!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> <!-- 點(diǎn)標(biāo)記 --> <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.設(shè)置為塊元素 2.可以將文本的字體大小設(shè)置為0 3.vertical-align:bottom*/ display: block;}/* 點(diǎn)標(biāo)記 */.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; /*設(shè)置盒模型*/ box-sizing: border-box; /*去除移動(dòng)端特有的點(diǎn)擊高亮效果*/ -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.清除文本框獲取焦點(diǎn)時(shí)默認(rèn)的邊框陰影*/ 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.設(shè)置修改輪播圖的頁(yè)面結(jié)構(gòu) * a.在開始位置添加原始的最后一張圖片 * b.在結(jié)束位置添加原始的第一張圖片*/ /*1.1.獲取輪播圖結(jié)構(gòu)*/ 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:復(fù)制一個(gè)dom元素*/ imgBox.appendChild(first.cloneNode(true)); /*1.6insertBefore(需要插入的dom元素，位置)*/ imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild); //獲取對(duì)應(yīng)的樣式 //2.1獲取li的位置 var lis=imgBox.querySelectorAll("li"); /*2.2 獲取li元素的數(shù)量*/ var count=lis.length; /*2.3.獲取banner的寬度*/ var bannerWidth=banner.offsetWidth; /*2.4 設(shè)置圖片盒子的寬度*/ imgBox.style.width=count*bannerWidth+"px"; /*2.5 設(shè)置每一個(gè)li(圖片)元素的寬度*/ for(var i=0; i < lis.length;i++){ lis[i].style.width=bannerWidth+"px"; } /*定義圖片索引:圖片已經(jīng)有一個(gè)寬度的默認(rèn)偏移*/ var index=1; /*3.設(shè)置默認(rèn)的偏移*/ imgBox.style.left=-bannerWidth+"px"; /*4.當(dāng)屏幕變化的時(shí)候，重新計(jì)算寬度*/ 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"; } //自動(dòng)輪播 var timerId; var strtime=function(){ timerId=setInterval(function(){ index++; //添加過(guò)度效果 imgBox.style.transition="left 0.5s ease-in-out" //設(shè)置偏移量 imgBox.style.left=(-index*bannerWidth)+"px"; setTimeout(function(){ //當(dāng)走到最后一張時(shí)候,我就讓他等于最后一張 if(index==count-1){ index=1; // 清除過(guò)度效果 imgBox.style.transition="none"; /*偏移到指定的位置*/ imgBox.style.left=(-index*bannerWidth)+"px"; } },500) },1500) } //自動(dòng)播放調(diào)用 strtime(); //實(shí)現(xiàn)手動(dòng)輪播 var startX,moveX,distanceX; /*為圖片添加觸摸事件--觸摸開始*/ var isEnd = true; imgBox.addEventListener("touchstart",function(e){ //停止定時(shí)器 clearInterval(timerId); //console.log(e); startX=e.targetTouches[0].clientX; }); //為圖片添加觸摸過(guò)程,滑動(dòng)圖片 imgBox.addEventListener("touchmove",function(e){ if(isEnd==true){ //console.log(123); /*記錄手指在滑動(dòng)過(guò)程中的位置*/ moveX=e.targetTouches[0].clientX; /*計(jì)算坐標(biāo)的差異*/ distanceX=moveX-startX; //清除過(guò)度效果 imgBox.style.transition="none"; //基于之前輪播圖偏移的位置 imgBox.style.left=(-index*bannerWidth + distanceX)+"px"; } }) /*添加觸摸結(jié)束事件*/ imgBox.addEventListener("touchend",function(e){ //獲取滑動(dòng)距離,判斷是否超過(guò)100px isEnd=false; if(Math.abs(distanceX) > 50){ //判斷滑動(dòng)方向 if(distanceX > 0){//上一張 index--; }else{//下一張 index++; } //過(guò)度效果 imgBox.style.transition="left 0.5s ease-in-out"; //偏移位置 imgBox.style.left=-index*bannerWidth+"px"; }else if(Math.abs(distanceX) > 0){//回彈效果 //過(guò)度效果 imgBox.style.transition="left 0.5s ease-in-out"; //偏移位置 imgBox.style.left=-index*bannerWidth+"px"; } /*將上一次move所產(chǎn)生的數(shù)據(jù)重置為0*/ startX=0; moveX=0; distanceX=0; }); /*webkitTransitionEnd:可以監(jiān)聽(tīng)當(dāng)前元素的過(guò)渡效果執(zhí)行完畢，當(dāng)一個(gè)元素的過(guò)渡效果執(zhí)行完畢的時(shí)候，會(huì)觸發(fā)這個(gè)事件*/ 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) }); // //圓點(diǎn)排他 var yuandian=function (index) { //先找到所有的li 進(jìn)行遍歷移除所有樣式,為自己加上樣式 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"); } }以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
