一、輪播圖
阿新 • • 發佈：2021-10-25
一、通過display:none和display:block實現輪播圖
1、樣式解釋
display:none 標籤和元件及其內容不顯示
display:none 標籤和元件及其內容顯示
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <link href="css/NavigationBar.css" rel="stylesheet" type="text/css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script> <style> .all{ width: 1300px; height: 500px; margin: 0 auto; } .b{ position: relative; width: 600px; height: 300px; margin:0 auto; } img{ width: 600px; height: 300px; display: none; float: left; } .all ul{ width: 300px; height: 20px; margin: 0px; padding: 0px; bottom: 55px; list-style-type: circle; position: absolute; /*相對於position: relative（父類）的絕對定位*/ top:275px; left: 300px; } #lenth{ margin-left: 200px; } .all li{ font-size: 20px; margin-left: 20px; float: left; color: white; } .all li:hover{ color: black; } .anniu{ position: absolute; } #left{ left: 0px; top: 140px; } #right{ right: 0px; top: 140px; } </style> </head> <body> <div class="all" id="one" > <div class="b"> <img class="img" src="https://www.keaidian.com/uploads/allimg/190424/24110307_8.jpg" alt="" style="display:block;color: black;" > <img class="img" src="https://tse1-mm.cn.bing.net/th/id/R-C.15a1ba773a211acdeae39f83c2c13241?rik=h1wkOstFSHzvTg&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170120%2ffdf948c82074494a74bf258eed4f855d.jpg&ehk=fYrgVtm0hD0sZn455mcVyf5k%2bQz7RScjHLMyUi6jG0A%3d&risl=&pid=ImgRaw&r=0" alt="" style="display: none"> <img class="img" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.4TuOo-Fd0Q9Xt2PhrZwdnQHaE8?pid=ImgDet&rs=1" alt="" style="display: none" > <ul> <li class="btu" id="lenth"></li> <li class="btu"></li> <li class="btu"></li> </ul> <button class="anniu" id="left" onclick="right(1)">left</button> <button class="anniu" id="right" onclick="right(0)">right</button> </div> </div> <script> var imgs=document.getElementById("one").getElementsByClassName("img") var lis=document.getElementById("one").getElementsByClassName("btu") var index=0; function right(x){ //右 if(x==0){ //聯絡左右點選防止block衝突 for(var i=0;i<imgs.length;i++){ imgs[i].style.display="none"; } //除去變化中的black格式 for(var j=0;j<lis.length;j++){ lis[index].style.color="white"; } index++; if(index==imgs.length){ index=0; } imgs[index].style.display="block"; lis[index].style.color="black"; } //左 if(x==1){ //聯絡左右點選防止block衝突 for(var i=0;i<imgs.length;i++){ imgs[i].style.display="none"; } //去變化中的black格式 for(var j=0;j<lis.length;j++){ lis[index].style.color="white"; } index--; if (index<0){ index=imgs.length-1; } imgs[index].style.display="block"; lis[index].style.color="black"; } } //過渡函式 function hello(name){ return function(){ right(0); } } //函式執行定時器，有引數必須有返回值（使用過渡函式） setInterval(hello(name),5000); </script> </body> </html>
2、應用程式碼