JavaScript实现简单轮播图效果

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

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