HTML5轮播图全代码

2023-07-08 03:49 作者：Admin

轮播图原理大概是这样的，假定三张图片需要做轮播效果，首先需要将这三张图片并列放置，然后将这个整体并列向左移动，每当一张图片完整的从显示框走出，则将这张图片放置到最后面，循环往复就可以实现图片向左（或一个方向）移动。然后，需要有两个定时器，一个定时器A控制三张图片整体左移速度，另一个定时器B控制每当一张完整的图片走进这个显示框就等待一到两秒得到更好的用户体验。

我这里用三个div框当作轮播图来演示。

在html的body中添加一个div作为显示框，然后在这个div内部添加三个子div作为图片显示。代码如下：

<div id="box">
  <div id="red" class="slide"></div>
  <div id="green" class="slide"></div>
  <div id="blue" class="slide"></div>
</div>

头部添加css样式：

此时网页中应该是有一个黑色显示框div，内部有红、绿、蓝三个div框,三个框从上到下排列。

第一步，需要将三张图片都并列显示。

要实现将div挪动，且div比较方便控制每时每刻的位置(移动)，只能使用相对定位，且为方便，三个子div位置移动应该是相对box，所以box应该作为相对的参照点。分别为box和slide代码添加position属性：

#box {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	position: relative;
}

.slide {
	width: 100px;
	height: 100px;
	position: absolute;
}

为整个页面添加onload加载完成事件，当浏览器打开并加载完并自动执行事件中的代码块。这部分js代码写在刚才css下面即可，保持同级结构。

<script type="text/javascript">
onload = function () {
  var arr = document.getElementsByClassName("slide");
  for (var i = 0; i < arr.length; i++) {
    arr[i].style.left = i * 100 + "px";
  }
};
</script>

当页面加载完全，三个div应该并列在一起。

接下来，需要实现将这三个div整体向左移动，使用定时器，即前面的定时器A。*onload同级下面添加如下代码：

function LeftMove() {
  var arr = document.getElementsByClassName("slide"); //获取三个子div
  for (var i = 0; i < arr.length; i++) {
    var left = parseFloat(arr[i].style.left);
    left -= 2;
    var width = 100; //图片的宽度
    if (left <= -width) {
      left = (arr.length - 1) * width; //当图片完全走出显示框，拼接到末尾
    }
    arr[i].style.left = left + "px";
  }
}
moveId = setInterval(LeftMove, 10); //设置一个10毫秒定时器，并给自己取名
/**此时，三个div已经能够缓慢向左移动。现在需要再开启一个定时器B，并将A定时器装入到B定时器中，A的定时器时间间隔应该长于一个div完全走进显示框的时间，我这里设置为3秒。然后，将A定时器装入到方法divInterval中，B定时器调用这个方法。且为了用户体验效果更好，当一个div完全走入显示框后，应该等待一段时间，再开是移动。所以在LeftMove方法中，*if判断中还需关闭moveId这个定时器*，停止此时移动的div定时器。当3秒不到的时间后，定时器B又会开启一个新的定时器A。**/
//if处添加一句代码为：

if (left <= -width) {
  left = (arr.length - 1) * width; //当图片完全走出显示框，拼接到末尾
  clearInterval(moveId);
}

function divInterval() {
  moveId = setInterval(LeftMove, 10); //设置一个10毫秒定时器
}
timeId = setInterval(divInterval, 3000); //设置一个3秒的定时器。

到这里，轮播图基本已经实现了。然后，还需要在css样式中为box添加overflow,将超出显示框的div隐藏。

#box {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	position: relative;
	overflow: hidden;
}

然后为了解决当鼠标悬停在轮播图，轮播图停止轮播效果，需要在box上添加鼠标移入和移出事件。开始标签：

<div id="box" onmouseover="stop()" onmouseout="start()">

添加js代码：

function stop() {
  clearInterval(timeId); //鼠标停留关闭B定时器
}
function start() {
  clearInterval(timeId); //重新打开一个定时前，先关闭之前定时器。
  timeId = setInterval(divInterval, 2000); //重启一个定时器
}

当浏览器窗口切出或页面切换到其他页面一段时间再回来时，轮播效果会有短暂加速（随切出时间加长而加长）。主要是因为虽然窗口切出去了，定时器依然在执行，但页面却没有将效果显示，所以切回来后会将之前的效果显示出来而加速轮播图。所以添加页面焦点事件：

//页面失去焦点定时器停止
onblur = function () {
  stop();
};
//页面获取焦点时重启定时器
onfocus = function () {
  start();
};

全部代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>轮播图</title>
    <style type="text/css">
      #box {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        position: relative;
        overflow: hidden;
      }
      #red {
        background-color: red;
        width: 100px;
      }
      #green {
        background-color: green;
        width: 100px;
      }
      #blue {
        background-color: blue;
        width: 100px;
      }
      .slide {
        width: 100px;
        height: 100px;
        position: absolute;
      }
    </style>
    <script type="text/javascript">
      onload = function () {
        var arr = document.getElementsByClassName("slide");
        for (var i = 0; i < arr.length; i++) {
          arr[i].style.left = i * 100 + "px";
        }
      };
      function LeftMove() {
        var arr = document.getElementsByClassName("slide"); //获取三个子div
        for (var i = 0; i < arr.length; i++) {
          var left = parseFloat(arr[i].style.left);
          left -= 2;
          var width = 100; //图片的宽度
          if (left <= -width) {
            left = (arr.length - 1) * width; //当图片完全走出显示框，拼接到末尾
            clearInterval(moveId);
          }
          arr[i].style.left = left + "px";
        }
      }
      function divInterval() {
        moveId = setInterval(LeftMove, 10); //设置一个10毫秒定时器
      }

      timeId = setInterval(divInterval, 2000); //设置一个3秒的定时器。

      function stop() {
        clearInterval(timeId);
      }
      function start() {
        clearInterval(timeId);
        timeId = setInterval(divInterval, 2000);
      }

      //页面失去焦点停止
      onblur = function () {
        stop();
      };
      //页面获取焦点时开始
      onfocus = function () {
        start();
      };
    </script>
  </head>
  <body>
    <div id="box" onmouseover="stop()" onmouseout="start()">
      <div id="red" class="slide"></div>
      <div id="green" class="slide"></div>
      <div id="blue" class="slide"></div>
    </div>
  </body>
</html>

文章来源：https://www.jb51.net/html5/772647.html

标签： #轮播图 #JavaScript