有手就會的輪播圖！！！
阿新 • • 發佈：2020-08-18
一個HTML就能幫你完成一個輪播圖！！！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ width: 100%; height: 100%; } </style> </head> <body> <div id="base"style="width: 300px;height: 300px;border: red 2px solid"><img id="bigimg" src="images/01.jpg"></div> <div id="imgUI"> <div style="float: left;width: 50px;height: 50px;border: red 1px solid"><img src="img/01.jpg"></div> <div style="float: left;width: 50px;height: 50px;border: red 1px solid"><img src="img/02.jpg"></div> <div style="float: left;width: 50px;height: 50px;border: red 1px solid"><img src="img/03.jpg"></div> </div> <script> var imgUI = document.getElementById('imgUI'); var img = imgUI.getElementsByTagName('img'); img[0].onmouseover = function () { document.getElementById('bigimg').src = img[0].src; }; img[1].onmouseover = function () { document.getElementById('bigimg').src = img[1].src; }; img[2].onmouseover = function () { document.getElementById('bigimg').src = img[2].src; }; </script> </body> </html>
效果如下圖：
意思就是滑鼠點到哪個圖，哪個圖放大唄！滑鼠實在不會截圖上去，p 圖又懶，就這樣啦。
圖片是我喜歡的一對 cp,不喜勿噴，要是侵權請聯絡我！！！