js 案例-6 無縫輪播圖
阿新 • • 發佈：2019-02-07
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <style type="text/css"> *{ padding:0; margin:0; list-style:none; border:0;} .all{ width:500px; height:200px; padding:7px; border:1px solid #ccc; margin:100px auto; position:relative; } .screen{ width:500px; height:200px; overflow:hidden; position:relative; } .screen li{ width:500px; height:200px; overflow:hidden; float:left;} .screen ul{ position:absolute; left:0; top:0px; width:3000px;} ul li{ color: black; font-size: 80px;text-align: center; padding-top: 40px;} .all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;} .all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;} .all ol li.current{ background:yellow;} #arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑體'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;} #arr #right{right:5px; left:auto;} </style> </head> <body> <div class="all" id='all'> <div class="screen" id="screen"> <ul id="ul"> <li style="background-color: red" width="500" height="200">1</li> <li style="background-color: yellow" width="500" height="200">2</li> <li style="background-color: blue" width="500" height="200">3</li> <li style="background-color: green" width="500" height="200">4</li> <li style="background-color: deeppink" width="500" height="200">5</li> </ul> <ol></ol> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> </div> </body> </html> <script> //需求：無縫輪播圖 //步驟： //1.老三步。獲取相關元素。 //2.補齊相互盒子 //1.複製第一張圖片所在的li，填入所在的ul中。 //2.生成相關的ol中的li。 //3.點亮第一個ol中的li。 //3.滑鼠放到小方塊兒上，輪播圖片。 //4.新增定時器。 //5.左右切換的按鈕。 //1.老三步。獲取相關元素。 var box = document.getElementById("all"); var ul = box.children[0].children[0]; var ol = box.children[0].children[1]; var ulLiArr = ul.children; //2.補齊相互盒子 //1.複製第一張圖片所在的li，填入所在的ul中。 var newLi = ulLiArr[0].cloneNode(true); ul.appendChild(newLi); //2.生成相關的ol中的li。 for(var i=0;i<ulLiArr.length-1;i++){ var newOlLi = document.createElement("li"); newOlLi.innerHTML = i+1; ol.appendChild(newOlLi); } //3.點亮第一個ol中的li。 var olLiArr = ol.children; ol.children[0].className = "current"; //3.滑鼠放到小方塊兒上，輪播圖片。 for(var i=0;i<olLiArr.length;i++){ olLiArr[i].index = i; olLiArr[i].onmouseover = function () { for(var j=0;j<olLiArr.length;j++){ olLiArr[j].className = ""; } olLiArr[this.index].className = "current"; animate(ul,-this.index*ul.children[0].offsetWidth); key = square = this.index; } } //4.新增定時器。 var timer = null; var key = 0; var square = 0; timer = setInterval(autoPlay,1500); function autoPlay(){ key++; square++; if(key>olLiArr.length){ key=1; ul.style.left = 0; } animate(ul,-key*ul.children[0].offsetWidth); square = square>olLiArr.length-1?0:square; for(var j=0;j<olLiArr.length;j++){ olLiArr[j].className = ""; } olLiArr[square].className = "current"; } //5.滑鼠移開開啟定時器，滑鼠放上去開啟定時器。 box.onmouseover = function () { clearInterval(timer); } box.onmouseout = function () { timer = setInterval(autoPlay,1000); } //6.左右切換的按鈕。 var btnArr = box.children[0].children[2].children; btnArr[0].onclick = function () { key--; square--; if(key<0){ key=4; ul.style.left = -5*ul.children[0].offsetWidth + "px"; } animate(ul,-key*ul.children[0].offsetWidth); square = square<0?olLiArr.length-1:square; for(var j=0;j<olLiArr.length;j++){ olLiArr[j].className = ""; } olLiArr[square].className = "current"; } btnArr[1].onclick = function () { autoPlay(); } // 基本封裝 function animate(obj,target) { clearInterval(obj.timer); var speed = obj.offsetLeft < target ? 15 : -15; obj.timer = setInterval(function() { var result = target - obj.offsetLeft; obj.style.left = obj.offsetLeft + speed + "px"; if(Math.abs(result) <= 15) { obj.style.left = target + "px"; clearInterval(obj.timer); } },10); } </script>