本文實例為大家分享了js實現簡單輪播圖效果的具體代碼，可以實現左右翻轉，圖片切換顯示等效果，供大家參考，具體內容如下
效果展示：
代碼展示：
<!doctype html> <html><!-- 學習功能：使用JavaScript實現圖片輪播，左右翻轉，圖片切換顯示等。 author: lisa于2018-5-30 --><title> <meta charset="utf-8"></title> <body> <div class="maindiv"> <style> * { margin: 0px; padding: 0px; } .shidian { width: 600px; height: 300px; position: relative; } .shidian>#shidian_img { width: 100%; height: 100%; } .shidian>#shidian_img li { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; } .shidian>#shidian_img img { width: 100%; height: 100%; } .shidian>#shidian_nav li { float: left; width: 20px; height: 20px; background: #ffffff; border: 1px #ffff00 solid; margin-left: 10px; text-align: center; line-height: 20px; list-style: none; } .shidian>#shidian_nav { position: absolute; right: 10px; bottom: 10px; } .shidian>#shidian_nav .active { background: 0000ff; color: black; cursor: pointer; } .shidian .img_nav { position: absolute; top: 140px; width: 100% } .shidian .img_nav .left { cursor: pointer; } .shidian .img_nav .right { cursor: pointer; float: right; } </style> <div class="shidian"> <ul id="shidian_img" onmouseover="stop_img()" onmouseout="start_img()"> <li><img src="./image/1.jpg" /></li> <li><img src="./image/3.jpg" /></li> <li><img src="./image/2.jpg" /></li> <li><img src="./image/4.jpg" /></li> </ul> <ul id="shidian_nav"> <li class="active" onmouseover="show_img1(this);">1</li> <li class="active" onmouseover="show_img1(this);">2</li> <li class="active" onmouseover="show_img1(this);">3</li> <li class="active" onmouseover="show_img1(this);">4</li> </ul> <div class="img_nav"> <span class="left" onclick="left_img()"><<</span> <span class="right" onclick="right_img()">>></span> </div> </div> <script> index = 0; imgs = document.getElementById("shidian_img").children; //獲得圖片節點 navs = document.getElementById("shidian_nav").children; // 獲得右下圖片導航的節點 //下一張輪播圖片 function next_img() { index++; if (index >= imgs.length) { index = 0; } show_log(); } //正常顯示圖片 function show_log() { for (i = 0; i < imgs.length; i++) { imgs[i].style.display = "none"; imgs[i].className = ""; } //console.log(index) if (index >= imgs.length) { index = 0; } imgs[index].style.display = "block"; imgs[index].className = "active"; } show_log(); timer = setInterval(next_img, 1000); function stop_img() { clearInterval(timer); } function start_img() { timer = setInterval(next_img, 1000); } //隨機切換顯示圖片 function show_img1(obj) { stop_img(); index = getIndex(obj.parentNode, obj); show_log(); } //向左翻圖片 function left_img() { stop_img(); index--; if (index < 0) index = imgs.length - 1; show_log(); start_img(); } //向右翻圖片 function right_img() { stop_img(); index++; if (index > imgs.length) index = 0; show_log(); start_img(); } //獲得當前的節點 function getIndex(parent, obj) { //console.log(obj.innerHTML); e = parent.children; for (i = 0; i < e.length; i++) { if (e[i] == obj) { return i; } } } </script> </div></body> </html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
