代码展示：
<!doctype html> <html> <!-- 学习功能：使用JavaScript实现图片轮播，左右翻转，图片切换显示等。 author: lisa于2018-5-30 --> <title> <meta charset="utf-8"> </title> <body> <div> <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> <ul> <li><img src="https://www.jb51.net/article/image/1.jpg" /></li> <li><img src="https://www.jb51.net/article/image/3.jpg" /></li> <li><img src="https://www.jb51.net/article/image/2.jpg" /></li> <li><img src="https://www.jb51.net/article/image/4.jpg" /></li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div> <span><<</span> <span>>></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>