原生JS實現一個完整的輪播圖
阿新 • • 發佈：2018-11-19
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } ul { list-style-type: none; } li, a { cursor: pointer; } img { vertical-align: middle; } .box { width: 500px; height: 200px; padding: 2px ; border: 1px solid deepskyblue; margin: 200px auto; position: relative; } .box .photoframe { height: 100%; overflow: hidden; position: relative; } .box .photoframe ul.photo { width: 600%; height: 200px; position: absolute; top: 0; left: 0; } .box .photoframe ul.photo li { float: left; } .box .photoframe ul.photo li a { display: block; } .box .photoframe ul.photo img { width: 500px; height: 200px; } .box .photoframe ul.point { position: absolute; bottom: 10px; right: 10px; } .box .photoframe ul.point li { float: left; width: 16px; height: 16px; background-color: #fff; border: 1px solid gray; color: green; margin-left: 10px; text-align: center; line-height: 16px; } .box .photoframe ul.point li.current { background-color: yellow; } ul.jiantou { display: none; } ul.jiantou li { position: absolute; width: 30px; height: 30px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0,.4); text-align: center; line-height: 30px; color: #ffffff; font-weight: bolder; } ul.jiantou li:hover { background-color: rgba(0,0,0,.8); } ul.jiantou li.left { left: 10px; } ul.jiantou li.right { right: 10px; } </style> </head> <body> <div class="box" id="box"> <div class="photoframe" id="photoframe"> <ul id="photo" class="photo"> <li><a href="#"><img src="images/1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/5.jpg" alt="" /></a></li> </ul> <ul class="point" id="point"> </ul> </div> <ul class="jiantou" id="jiantou"> <li id="left" class="left"><</li> <li id="right" class="right">></li> </ul> </div> <script src="js/id.js"></script> <script src="js/moveEle.js"></script> <script src="js/creat.js"></script> <script src="js/getsetText.js"></script> <script> //獲取box var box=my$('box'); //獲取相框 var phf=my$('photoframe'); //獲取ul var ull=phf.children[0]; //獲取圖片 var list=ull.children; //console.log(list); //獲取每個圖片的寬度 var imgWidth=list[0].offsetWidth; //獲取點 var uist=my$('point'); //動態建立點 for(var i=0;i<list.length;i++){ var liObj=creat('li'); liObj.setAttribute('index',i); setText(liObj,i+1); console.log(liObj); uist.appendChild(liObj); } //console.log(uist.children); var pist=uist.children; //設定第一個點的背景顏色 pist[0].className='current'; var index=0; for(var k=0;k<list.length;k++) { pist[k].onmouseover = function () { for (var j = 0; j < list.length; j++) { pist[j].removeAttribute('class'); } this.className = 'current'; index=this.getAttribute('index'); console.log(index); move(ull,-index*imgWidth,50); }; } //克隆ul的第一個子元素，放到最後的位置 // ull.appendChild(ull.children[0].cloneNode(true)); //滑鼠進入box的時候顯示左右箭頭,移出消失 var jiantou=my$('jiantou'); box.onmouseover=function(){ jiantou.style.display='block'; clearInterval(time); }; box.onmouseout=function(){ jiantou.style.display='none'; time=setInterval(willing,1000); }; //左箭頭事件 my$('left').onclick=function(){ if(index>0){ index--; for(var q=0;q<list.length;q++){ pist[q].removeAttribute('class'); } pist[index].className='current'; move(ull,-index*imgWidth,50); } else if(index===0){ index=4; ull.style.left='-2000px'; move(ull,-index*imgWidth,50); pist[0].removeAttribute('class'); pist[4].className='current'; } }; //右箭頭事件 my$('right').onclick=willing; function willing() { if (index < list.length - 1) { index++; for (var q = 0; q < list.length; q++) { pist[q].removeAttribute('class'); } pist[index].className = 'current'; move(ull, -index * imgWidth, 50); } else if (index === list.length - 1) { index = 0; ull.style.left = '0px'; move(ull, -index * imgWidth, 50); pist[4].removeAttribute('class'); pist[index].className = 'current'; } } //實現自動播放 var time=setInterval(willing,1000); </script> </body> </html>
最終效果如下：
實現了自動輪播，滑鼠移入顯示左右箭頭並且可以點選箭頭切換圖片，滑鼠移出箭頭消失，以及滑鼠懸浮下方方塊切換圖片
