HTML+CSS+Javascript實現輪播圖效果
阿新 • • 發佈：2022-01-18
HTML+CSS+Javascript實現輪播圖效果
注意：根據自己圖片大小來更改輪播圖大小。
<!doctype html> <html> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } /*去掉ul、ol、li源有的樣式*/ ul, ol, li { list-style: none; } /*設定圖片樣式為*/ img { width: 100%; height: 100%; display: block; /*圖片可見*/ } /*設定最大div的樣式*/ .banner { width: 50%; height: 60%; position: absolute; margin: 50px 0; left: 50%; top: 50%; transform: translate(-50%, -50%); } /*設定ul的樣式對齊方式為相對對齊*/ .banner>ul { width: 100%; height: 100%; position: relative; } /*設定裝圖片的li樣式*/ .banner>ul>li { width: 100%; height: 100%; position: absolute; /* 絕對對齊*/ left: 0; top: 0; opacity: 0; /*完全透明*/ transition: opcity .5s linear; /* 平滑過渡*/ } /*當用戶點選後釋放滑鼠後圖片的li生效*/ .banner > ul > li.active { opacity: 1; /* 完全不透明*/ } /*下方呈現的小按鈕外圍樣式*/ .banner > ol { width: 200px; height: 60px; position: absolute; /*絕對定位*/ left: 50%; bottom: 50px; background-color: coral; opacity: 0.4; transform: translateX(-50%); /*左邊距減去自身的一半*/ display: flex; /*水平排列*/ justify-content: space-around; /*水平兩端對齊*/ align-items: center; /*垂直居中對齊 */ border-radius: 80px; /*圓角*/ } /*下方小圓按鈕的樣式*/ .banner > ol > li { width: 20px; height: 20px; background-color: aliceblue; border-radius: 50%; /*圓角50%*/ cursor: pointer; /*滑鼠移動到此處變成小手*/ } /*點選小按鈕後釋放滑鼠後li生效*/ .banner > ol > li.active { background-color: limegreen; } /*左右按鈕*/ .banner>div { width: 100px; height: 150px; position: absolute; top: 50%; transform: translateY(-50%); /*上邊距減去自身高度的一半*/ background-color: black; opacity: 0.4; /* 透明度0.4*/ display: flex; /*擺脫文件流限制，相對定位*/ justify-content: center; /*內部元素和內容垂直居中*/ align-items: center; /*內部元素和內容水平居中*/ font-size: 90px; /*字型大小*/ color: aliceblue; } /*左邊按鈕樣式*/ .banner>div.left { left: 0; /* 左對齊*/ cursor: pointer; /*滑鼠移動到此處變成小手*/ } /*右邊按鈕樣式*/ .banner>div.right { right: 0; /* 右對齊*/ cursor: pointer; /*滑鼠移動到此處變成小手*/ } </style> </head> <body> <div class="banner"> <ul class="imgBox"> <li class="active"><img src="img/1.jpg" alt=""></li> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.jpg" alt=""></li> <li><img src="img/4.jpg" alt=""></li> </ul> <ol><!--自定義屬性 自定義屬性--> <li data-i="0" class="active" data-c="pas"></li> <li data-i="1" data-c="pas"></li> <li data-i="2" data-c="pas"></li> <li data-i="3" data-c="pas"></li> </ol> <div class="left"><</div> <!--<代表"<"--> <div class="right">></div> <!--<代表">"--> </div> <script type="text/javascript"> //獲取所有圖片的li和所有焦點的li var imgs=document.querySelectorAll("ul > li") var point=document.querySelectorAll("ol > li") //獲取最大div的元素 var banner=document.querySelector(".banner") //index表示第幾張圖片預設第0張顯示 var index=0 //隱藏當前這種圖片，顯示第index張圖片方法 //true表示切換到下一張圖片 //false表示切換到上一張圖片 function changeOne(type){ //隱藏第index張圖片 imgs[index].className='' //隱藏第index個按鈕高亮（綠色） point[index].className='' //判斷傳過來的值是否是true，是就切換下一張圖片 if(type===true){ index++ }else if(type===false){ //判斷傳過來的值是否是false，是就切換上一張圖片 index-- }else{ //都不是說明點選是小圓點，就切換到type張圖片 index=type } //判斷index有沒有越界，越了就從頭開始或者從最後開始 if(index>=imgs.length){ index=0 } if(index<0){ index=imgs.length-1 } //為index張圖片設定active屬性 //圖片是透明度設定不透明， imgs[index].className="active" //小圓點是設定高亮 point[index].className="active" } //單擊判斷呼叫changeOne(type)方法 banner.onclick=function(e){ //判斷點選的是否是點選了左邊的按鈕 if(e.target.className==="left"){ changeOne(false)//如果是就呼叫方法，並傳參false } //判斷點選的是否是點選了右邊的按鈕 if(e.target.className==="right"){ changeOne(true) //如果是就呼叫方法，並傳參true } //判斷是否點選了小按鈕（自定義屬性判斷，可以去看小圓點li裡的（data-c）） if(e.target.dataset.c==="pas"){ //如果是再次通過自定義屬性判斷點選的哪一個小圓點，並把值傳過去 var i=e.target.dataset.i-0 changeOne(i) } } //自動切換下一張圖片方法 setInterval(function(){ changeOne(true) },5000) </script> </body> </html>
本文來自部落格園，作者：永恆之月TEL，轉載請註明原文連結：https://www.cnblogs.com/akc4/p/15818718.html