Html5+JavaScript輪播圖實現方式
阿新 • • 發佈：2018-12-27
這…足夠應付大學老師的作業了 /偷笑
這應該是大學JavaScript老師常佈置的js作業之一,只做了三個圖片,可以修改圖片和尺寸,修改好名字之後替換即可,如果要新增第四張圖片所有的px都要修改.一開始就是用三張圖片做的,就沒弄四張照片
圖片自己找吧,
樣式圖
下面是程式碼
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>輪播圖</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <link rel="stylesheet" type="text/css" href="css/main.css"/> </head> <body> <div id="box"> <div id="imgbox"> <img src="img/1.jpg"/> <img src="img/2.jpg"/> <img src="img/3.jpg"/> </div> <div id="img1box"> <img id="img-1" src="img/up.png"/> <img id="img-2" src="img/down.png"/> </div> <ul> <li></li> <li></li> <li></li> </ul> </div> </body> <script type="text/javascript" src="js/lb.js"></script> </html>
main.css
#box{ height: 250px; width: 600px; border: 5px solid black; margin: 100px auto; position: relative; overflow: hidden; } #imgbox{ height: 250px; width: 1800px; position: absolute; } #imgbox>img{ height: 250px; width: 600px; float: left; } #img1box{ width: 100%; height: 40px; position: absolute; top: 40%; } #img1box>img{ height: 100%; width: 60px; } #img-1{ position: absolute; left: 20px; } #img-2{ position: absolute; right: 20px; } ul{ width: 200px; height: 20px; list-style: none; position: absolute; left: 0; right: 0; top: 220px; margin: 0 auto; display: flex; justify-content: space-around; } li{ width: 20px; height: 20px; float: left; background: none; border: 2px solid limegreen; border-radius: 50%; }
lb.js
var imgbox=document.getElementById("imgbox"); var li=document.getElementsByTagName("li"); //點選控制 li[0].style.background="lime"; //預設的顯示第一頁 將第一個圓圈改色 li[0].onclick=function(){ //點選第一個標籤 this.style.background="lime"; //給第一個標籤改色 imgbox.style.left="0"; //進行圖片的輪播 li[1].style.background=""; // 將其他兩個標籤除色 li[2].style.background=""; } li[1].onclick=function(){ this.style.background="lime"; imgbox.style.left="-600px"; li[0].style.background=""; li[2].style.background=""; } li[2].onclick=function(){ this.style.background="lime"; imgbox.style.left="-1200px"; li[1].style.background=""; li[0].style.background=""; } var up=document.getElementById("img-1"); var down=document.getElementById("img-2"); //上一頁 下一頁控制 up.onclick=function(){ var y=imgbox.offsetLeft; //獲取當前顯示頁, if(y>-600) //判定是否需要從第一頁跳轉到最後一頁 { y=-1800; } var x=y+600; imgbox.style.left=x+"px"; //圖片輪播 //判斷當前顯示頁 修改標籤顏色 if(x==0) { li[0].style.background="lime"; li[1].style.background=""; li[2].style.background=""; } if(x==-600) { li[0].style.background=""; li[1].style.background="lime"; li[2].style.background=""; } if(x==-1200) { li[0].style.background=""; li[1].style.background=""; li[2].style.background="lime"; } } down.onclick=function(){ var y=imgbox.offsetLeft; if(y<-600) { y=600; } var x=y-600; imgbox.style.left=x+"px"; switch (x) { case 0: li[0].style.background="lime"; li[1].style.background=""; li[2].style.background=""; break; case -600: li[0].style.background=""; li[1].style.background="lime"; li[2].style.background=""; break; case -1200: li[0].style.background=""; li[1].style.background=""; li[2].style.background="lime"; break; } }