HTMl部分app
1 <div id="box"> 2 <div class="inner"> 3 <ul> 4 <li><a href=""><img src="./images/1.jpg" alt=""></a></li> 5 <li><a href=""><img src="./images/2.jpg" alt=""></a></li> 6 <li><a href=""><img src="./images/3.jpg" alt=""></a></li> 7 <li><a href=""><img src="./images/4.jpg" alt=""></a></li> 8 <li><a href=""><img src="./images/5.jpg" alt=""></a></li> 9 </ul> 10 <ol></ol> 11 <div id="circle"> 12 <span id="left" class="arr"><</span> 13 <span id="right" class="arr">></span> 14 </div> 15 </div> 16 </div>
CSS部分函數
1 <style> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 7 #box { 8 width: 700px; 9 height: 400px; 10 padding: 5px; 11 margin: 200px auto; 12 border: 1px solid #ccc; 13 } 14 15 .inner { 16 width: 100%; 17 height: 100%; 18 position: relative; 19 overflow: hidden; 20 } 21 22 .inner ul { 23 width: 1000%; 24 height: 100%; 25 position: absolute; 26 top: 0; 27 left: 0; 28 } 29 30 .inner li { 31 list-style: none; 32 float: left; 33 } 34 35 .inner img { 36 width: 700px; 37 height: 400px; 38 vertical-align: top; 39 } 40 41 ol { 42 position: absolute; 43 bottom: 20px; 44 left: 50%; 45 transform: translate(-50%, 0); 46 } 47 48 ol li { 49 width: 12px; 50 height: 12px; 51 background-color: rgba(255, 255, 255, .3); 52 border-radius: 50%; 53 margin-right: 10px; 54 cursor: pointer; 55 } 56 57 ol .current { 58 background-color: red; 59 } 60 61 #circle { 62 display: none; 63 } 64 65 #circle span:hover { 66 background-color: rgba(255, 0, 0, .7); 67 } 68 69 #circle .arr { 70 position: absolute; 71 top: 50%; 72 transform: translate(0, -50%); 73 width: 50px; 74 height: 50px; 75 line-height: 50px; 76 text-align: center; 77 background-color: rgba(0, 0, 0, .5); 78 color: #fff; 79 font-size: 40px; 80 cursor: pointer; 81 } 82 83 #left { 84 left: 0; 85 } 86 87 #right { 88 right: 0; 89 } 90 </style>
js部分動畫
1 <script> 2 //懶得寫document.getElementById,因此聲明瞭一個函數 3 function byid(id) { 4 return document.getElementById(id); 5 } 6 7 //動畫函數，爲下面的輪播圖作鋪墊 8 function animate(element, target) { 9 //首先先清除一遍定時器 10 clearInterval(element.timeID); 11 12 //經過對象屬性的方式建立一個定時器，避免重複建立從而消耗內存 13 element.timeID = setInterval(function () { 14 //先獲取目標元素當前的位置（及定位後的left值） 15 var current = element.offsetLeft; 16 //定義每次移動的距離 17 var step = 15; 18 //判斷當前位置與目標位置的關係，若是當前位置小於目標位置走「正」距離，反之走「負」距離 19 step = current < target ? step : -step; 20 //獲得即將到達的位置 21 current += step; 22 //判斷若是目標位置與當前位置的差值大於每次移動的距離，及移動 23 if (Math.abs(current - target) > Math.abs(step)) { 24 element.style.left = current + "px"; 25 } else { //判斷若是目標位置與當前位置的差值小於每次移動的距離，清除定時器，而且直接到達目標位置 26 clearInterval(element.timeID); 27 element.style.left = target + "px"; 28 } 29 }, 25); 30 } 31 //定義一個全局變量，爲顏色同步作準備 32 var num = 0; 33 //獲取最外層div 34 var box = byid("box"); 35 //獲取相框=id爲inner的div 36 var inner = box.children[0]; 37 //獲取相框的長度 38 var innerWidth = inner.offsetWidth; 39 //獲取ul 40 var ulObjs = inner.children[0]; 41 //獲取ul裏的全部li 42 var listObjs = ulObjs.children; 43 //獲取ol 44 var olObjs = inner.children[1]; 45 //獲取小圓點的父級元素 46 var circle = byid("circle"); 47 //循環遍歷 48 for (var i = 0; i < listObjs.length; i++) { 49 //建立li元素 50 var liObjs = document.createElement("li"); 51 //將建立的元素添加到ol元素中 52 olObjs.appendChild(liObjs); 53 //給每一個小圓點自定義屬性，存儲i值 54 liObjs.setAttribute("index", i); 55 //給第一個小圓點添加樣式 56 olObjs.children[0].className = "current"; 57 //給每一個小圓點作鼠標進入事件 58 liObjs.onmouseover = function () { 59 //首先刪除全部小圓點的類樣式 60 for (var j = 0; j < olObjs.children.length; j++) { 61 olObjs.children[j].removeAttribute("class"); 62 } 63 //給當前作鼠標進入事件的小圓點添加樣式 64 this.className = "current"; 65 //獲取當前圓點的自定義屬性值，爲下面的移動作鋪墊 66 num = this.getAttribute("index"); 67 //利用上面建立好函數經過移動ul的lifet值表現出移動效果 68 animate(ulObjs, -innerWidth * num); 69 }; 70 } 71 //鼠標進入出現箭頭 72 box.onmouseover = function () { 73 circle.style.display = "block"; 74 //清除定時器 75 clearInterval(timeId); 76 }; 77 //鼠標離開隱藏箭頭 78 box.onmouseout = function () { 79 circle.style.display = "none"; 80 //從新賦值定時器 81 timeId = setInterval(carousel, 1500); 82 }; 83 //建立一個定時器實現自動播放效果 84 var timeId = setInterval(carousel, 1500); 85 //克隆ul裏的最後一張圖片，爲實現無縫播放作鋪墊 86 ulObjs.appendChild(listObjs[0].cloneNode(true)); 87 //右箭頭點擊事件 88 byid("right").onclick = carousel; 89 90 function carousel() { 91 //先判斷索引值是否等於最大值（圖片個數），若是是跳到第二張圖片 92 if (num == listObjs.length - 1) { 93 num = 0; 94 ulObjs.style.left = 0; 95 } 96 num++; 97 //經過動畫函數實現點擊後圖片移動效果 98 animate(ulObjs, -innerWidth * num); 99 //實現小圓點顏色同步 100 if (num == listObjs.length - 1) { 101 olObjs.children[olObjs.children.length - 1].className = ""; 102 olObjs.children[0].className = "current"; 103 } else { 104 for (var i = 0; i < olObjs.children.length; i++) { 105 olObjs.children[i].removeAttribute("class"); 106 } 107 olObjs.children[num].className = "current"; 108 console.log(num); 109 } 110 } 111 //左箭頭點擊事件 112 byid("left").onclick = function () { 113 if (num == 0) { 114 num = ulObjs.children.length - 1; 115 ulObjs.style.left = -(ulObjs.children.length - 1) * innerWidth + "px"; 116 } 117 num--; 118 animate(ulObjs, -innerWidth * num); 119 for (var i = 0; i < olObjs.children.length; i++) { 120 olObjs.children[i].removeAttribute("class"); 121 } 122 olObjs.children[num].className = "current"; 123 console.log(num); 124 }; 125 </script>