mobile 轮播图
小圆点逻辑（排他）
1. 统一给所有 span 元素加 class="";
2. 切换到谁，谁的 class="active";
- 移动端轮播图
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <title>移动端轮播图</title> <style type="text/css"> * { padding: 0; margin: 0; } a { text-decoration: none; } ul, ol { list-style: none; } input { outline: none; } img { display: block; } html, body { height: 100%; overflow: hidden; } #wrap { width: 100%; height: 100%; background-color: #96b377; } /**** ****/ #wrap { position: relative; } #wrap #ul_list { position: absolute; top: 0; left: 0; overflow: hidden; width: 500%; } #wrap #ul_list>li { float: left; } #wrap #ul_list>li>a>img{ width: 100%; } /**** 小圆点 ****/ #ol_list { position: absolute; bottom: 10px; right: 10px; width: 75px; display: flex; justify-content: space-between; } #ol_list li { width: 10px; height: 10px; border-radius: 50%; background-color: gray; } #ol_list li.active { background-color: deeppink; } </style> </head> <body> <!-- 模拟手机屏幕 --> <section id="wrap"> <ul id="ul_list"> <li> <a href="javascript:;"><img src="./img/Deadpool.jpg"/></a> </li> <li> <a href="javascript:;"><img src="./img/Groot.jpg"/></a> </li> <li> <a href="javascript:;"><img src="./img/Hock.jpg"/></a> </li> <li> <a href="javascript:;"><img src="./img/RocketRaccoon.jpg"/></a> </li> <li> <a href="javascript:;"><img src="./img/SpiderMan.jpg"/></a> </li> </ul> <ol id="ol_list"> <li data-pindex="0" class="active"></li> <li data-pindex="1"></li> <li data-pindex="2"></li> <li data-pindex="3"></li> <li data-pindex="4"></li> </ol> </section> <!-- javascript 代码 --> <script type="text/javascript"> // 取消默认行为 document.addEventListener("touchstart", function(e){ e.preventDefault(); }, false); // 点透处理 var clientWidth = document.documentElement.clientWidth; // 适配 (function(){ /* 1. 创建 style 标签 */ var styleNode = document.createElement("style"); /* 2. 给 style 标签添加内容 (屏幕分份, 大多数公司 16 份) */ styleNode.innerHTML = "html {"+ "font-size:"+clientWidth/16+"px !important"+ "}"; /* IPhone 6 的 font-size: 23.4375px */ /* 3. 把 style 标签追加到 head 标签里 */ document.head.appendChild(styleNode); }()); var wrap = document.getElementById("wrap"); var ulList = document.getElementById("ul_list"); var olList = document.getElementById("ol_list"); var lis = document.querySelectorAll("#ul_list>li"); var points = document.querySelectorAll("#ol_list>li"); window.onload = function(){ var styleNode = document.createElement("style"); styleNode.innerHTML = "#ul_list {"+lis.length+"00%;}"; styleNode.innerHTML += "#ul_list>li {"+100/lis.length+"%;}"; document.head.appendChild(styleNode); styleNode.innerHTML += "#wrap {height:"+lis[0].offsetHeight+"px;}"; }; var oldUlX = 0; var oldTouchX = 0; var curIndex = 0; wrap.addEventListener("touchstart", function(e){ var touch = e.changedTouches; oldTouchX = touch[0].clientX; oldUlX = ulList.offsetLeft; },false); wrap.addEventListener("touchmove", function(e){ var touch = e.changedTouches; var newTouchX = touch[0].clientX; var newUlX = oldUlX + (newTouchX - oldTouchX); if(newUlX > 0){ newUlX = 0; }else if(newUlX < -ulList.offsetWidth+clientWidth){ newUlX = -ulList.offsetWidth+clientWidth; } ulList.style.left = newUlX + "px"; },false); wrap.addEventListener("touchend", function(){ curIndex = Math.round(-ulList.offsetLeft/clientWidth); ulList.style.left = -curIndex*clientWidth + "px"; for(var i=0; i<points.length; i++){ points[i].className = ""; }; points[curIndex].className = "active"; },false); olList.addEventListener("touchstart", function(e){ touch = e.changedTouches; e.stopPropagation(); ele = touch[0].target; if(ele.nodeName == "LI"){ for(var i=0; i<points.length; i++){ points[i].className = ""; }; ele.className = "active"; curIndex = +ele.dataset.pindex; ulList.style.left = -curIndex*clientWidth + "px"; }; }, false); </script> </body> </html>