純js做小米官網輪播圖
阿新 • • 發佈：2019-01-10
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>輪播圖</title> <style type="text/css"> .wrap{ width: 800px; height:400px ; position: relative; cursor: pointer; /*滑鼠變手指*/ } .list{ list-style: none; position: relative; padding-left: 0px; } .item{ position: absolute; opacity: 0; transition: all 3s; } img{ width: 800px; height: 400px; } .btn{ width: 50px; height: 100px; position: absolute; top: 150px; font-size: 50px; color: rgba(0, 0, 0, 0.1); z-index: 100; border: none; outline: none; background: rgba(0,0,0,0); } .btn:hover{ background: rgba(0, 0, 0, 0.12); } #goPro{ left: 0px; } #goNext{ right: 0px; } .item.active{ opacity: 1; z-index: 10; } .pointList{ padding-left: 0px; list-style: none; position: absolute; right: 20px; bottom: 20px; z-index: 999; } .point{ width: 8px; height: 8px; background-color: rgba(0,0,0,0.4); border-radius: 100%; float: left; margin-right: 10px; border: 2px solid rgba(255,255,255,0.6); } .point.active{ background-color: rgba(255,255,255,0.4); } </style> </head> <body> <div class="wrap"> <ul class="list"> <li class="item active "><img src="images/xmad_1542718183295_gZCXT.jpg" /></li> <li class="item"><img src="images/xmad_1542971774587_QVYos.jpg" /></li> <li class="item "><img src="images/xmad_15369176983433_sWNIg.jpg"/></li> <li class="item "><img src="images/xmad_15419444592813_JwZlv.jpg"/></li> <li class="item"><img src="images/xmad_15427940817559_aubLz.jpg"/></li> </ul> <ul class="pointList"> <li class="point active" data-index="0"></li> <li class="point " data-index="1"></li> <li class="point " data-index="2"></li> <li class="point" data-index="3"></li> <li class="point" data-index="4"></li> </ul> <button type="button" class="btn" id="goPro"><</button> <button type="button" class="btn" id="goNext">></button> </div> <script type="text/javascript"> var items=document.getElementsByClassName("item"); var points=document.getElementsByClassName("point"); var goProBtn=document.getElementById("goPro"); var goNextBtn=document.getElementById("goNext"); var time=0; var index=0; function clearActive() { for(var i=0;i<items.length;i++) { items[i].className="item"; } for(var i=0;i<points.length;i++) { points[i].className="point"; } } function goIndex() { clearActive(); points[index].className="point active"; items[index].className="item active"; } function goNext() { if(index<4){ index++; } else{ index=0; } goIndex(); } function goPro() { if(index==0){ index=4; } else{ index--; } goIndex(); } goNextBtn.addEventListener("click",function () {goNext();}) goProBtn.addEventListener("click",function () {goPro();}) for (var i=0;i<points.length;i++){ points[i].addEventListener("click",function () { var pointIndex=this.getAttribute("data-index"); index=pointIndex; goIndex(); time=0; }) } setInterval(function () { time++; if(time==20){ goNext(); time=0; } },100); </script> </body> </html>