JavaScript实现简单轮播图效果

时间：2021-05-26

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章