本文實例為大家分享了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武林網。
新聞熱點
疑難解答
