首頁 > 開發者 > JavaScript
JS實現簡易圖片輪播效果的方法，js輪播
本文執行個體講述了JS實現簡易圖片輪播效果的方法。分享給大家供大家參考。具體如下：
這裡使用JS製作簡易圖片輪播效果：
製作比較粗糙，使用的圖片是width：660ppx,height：550px;
如下：
代碼部分如下：
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS幻燈代碼</title> <script type="text/javascript"> window.onload = function () { flag = 0; obj1 = document.getElementById("slider"); obj2 = document.getElementsByTagName("li"); obj2[0].style.backgroundColor = "#666666"; //預設被選中顏色 time = setInterval("turn();", 5000); obj1.onmouseover = function () { clearInterval(time); } obj1.onmouseout = function () { time = setInterval("turn();", 6000); } for (var num = 0; num < obj2.length; num++) { obj2[num].onmouseover = function () { turn(this.innerHTML); clearInterval(time); } obj2[num].onmouseout = function () { time = setInterval("turn();", 6000); } } //消極式載入圖片，示範的時候，使用本地圖片 //上線後請改為次層網域提供的圖片地址 document.getElementById("second").src = "images/2.png"; //使用圖片寬660，高550 document.getElementById("third").src = "images/3.png"; document.getElementById("four").src = "images/4.png"; } function turn(value) { if (value != null) { flag = value - 2; } if (flag < obj2.length - 1) flag++; else flag = 0; obj1.style.top = flag * (-550) + "px"; for (var j = 0; j < obj2.length; j++) { obj2[j].style.backgroundColor = "#ffffff"; } obj2[flag].style.backgroundColor = "#666666"; } </script> <style type="text/css"> #wrap { height: 550px; width: 660px; overflow: hidden; position: relative; overflow: hidden; } #wrap ul { list-style: none; position: absolute; top: 500px; left: 450px; } #wrap li { margin-left:2px; opacity: .3; filter: alpha(opacity=30); text-align: center; line-height: 30px; font-size: 20px; height: 30px; width: 30px; background-color: #fff; float: left; border-radius:3px; cursor:pointer; } #slider { position: absolute; top: 0px; left: 0px; } #slider img { float: left; border: none; } </style> </head> <body> <div id="wrap"> <div id="slider"> <a target="_blank" href="#"><img src="images/1.png" /></a> <a target="_blank" href="#"><img id="second" /></a> <a target="_blank" href="#"><img id="third" /></a> <a target="_blank" href="#"><img id="four" /></a> </div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html>
希望本文所述對大家的javascript程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
