前端分享｜Html+CSS+JS 实现轮播切换

一创建一个Html网页文档

在IDE编辑器中，单击

图标，创建index.html文件。

在 index.html中，添加如下代码，创建HTML网页结构。

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <h1>看Aion如何使用JavaScript实现轮播图展示</h1>
</body>
</html>

二安装Http-server模块

在IDE编辑器中，单击下方的终端。

2.在终端区域，执行如下命令，安装http-server模块。

说明：Windows操作系统在终端区域中您可以使用右键粘贴命令，macOS系统在终端区域中您可以使用command shift v快捷键粘贴命令。

代码语言：javascript复制

npm install http-server -g

3.在终端区域，执行如下命令，开启http-server服务。

代码语言：javascript复制

http-server

4.在IDE编辑器中，单击下方的预览，输入对应的端口号8080，按回车（Enter）键。

返回如下页面，您可看到您创建的index.html的页面。

三 Html标签轮播布局

在index.html中，在<body>标签中，添加如下代码，编写整体的页面布局。

说明：代码中的布局分为相框展示部分，相框下册选择框，和左右两侧的切换三个部分。

代码语言：javascript复制

<div id="box" class="all">
    <div class="inner">   <!-- 相框-->
         <ul>
             <li><a href="#"><img src="https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" width="550" height="320"  alt=""></a></li>
             <li><a href="#"><img src="https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" width="550" height="320" alt=""></a></li>
             <li><a href="#"><img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80" width="550" height="320" alt=""></a></li>
             <li><a href="#"><img src="https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" width="550" height="320" alt=""></a></li>
 
         </ul>
        <ol>  <!--里面存放小圆点-->
 
         </ol>
     </div>
     <div class="focusD" id="arr">
         <span id="left">&lt</span>
         <span id="right">&gt</span>
     </div>
 </div>

四使用css js实现轮播效果

布局写完了，我们现在要为轮播图编写样式，调整所有元素的层级与定位。

在index.html中，在<head>标签中，添加如下代码，采用内部样式表来编写样式。<style>标签通常使用在<head>标签中的最后。

代码语言：javascript复制

<style>
  * {
      margin: 0;
      padding: 0;
  }
  /*<--清除底部三像素距离-->*/
  img {
      vertical-align: top;
  }
  .all {
      width: 550px;
      height: 320px;
      margin: 100px auto;
      padding: 5px;
      border: 1px solid #ccc;
      position: relative;
  }
  .inner {
      position: relative;
      width: 550px;
      height: 320px;
      background-color: pink;
      overflow: hidden;
  }
  .inner ul {
      width: 1000%;
      list-style: none;
      position: absolute;
      top: 0;
      left: 0;
  }
  .inner ul li {
      float: left;
  }
  .focusD {
      position: absolute;
      left: 0;
      top: 50%;
      width: 550px;
      padding: 0 10px;
      height: 30px;
      box-sizing: border-box;
   display: none;
  }
  .inner ol {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translate(-50%);
  }
  .inner ol li {
      justify-content: center;
      width: 15px;
      display: inline-block;
      height: 15px;
      margin: 0 3px;
      cursor: pointer;
      line-height: 15px;
      text-align: center;
      background-color: rgb(248, 247, 247);
      border-radius: 50%;
  }
  /*当前的高亮的小圆点*/
  .inner ol .current {
      background-color: orange;
      color: #fff;
  }
  .focusD span {
      display: inline-block;
      width: 25px;
      font-size: 24px;
      height: 30px;
      color: #ccc;
      line-height: 30px;
      text-align: center;
      background: rgba(255, 255, 255, 0.3);
      cursor: pointer;
  }
  #left {
      float: left;
  }
  #right {
      float: right;
  }
</style>

2、在index.html中，在<body>标签之后，添加<script>标签和js代码。<script>标签通常使用在<body>标签中的最后。

2.1添加如下<script>标签和js代码，首先我们先获取我们需要的所有元素。

代码语言：javascript复制

<script> 
  var index=0;
    //获取最外面的div
    var box = my$("box");
    //获取相框
    var inner = box.children[0];
    //获取去相框的宽度
    var imgWidth = inner.offsetWidth;
    // 获取ul
    var ulObj = inner.children[0];
    //获取ul中所有的li
    var list = ulObj.children;
    //获取ol
    var olObj = inner.children[1];
    //获取焦点
    var arr = my$("arr");
 </script>

1.2在<script>标签中添加如下js代码，我们需要给它创建小按钮即小圆点并注册鼠标进入事件，再此之前我们要明白，小圆点 1 2 3 并不是写死的，它是根据ul li中的图片张数来决定的，所以我们要先在js中给div中的ol中的添加li(即小圆点)，并且给ul中的图片几li添加索引值以便下一步的操作。

代码语言：javascript复制

for (var i = 0; i < list.length; i  ) {
        var liObjs = document.createElement("li");
        olObj.appendChild(liObjs);
        liObjs.innerHTML = (i   1);
        //在ol中每个li中增加自定义属性，添加索引值
        liObjs.setAttribute("index", i);
        //注册鼠标进入事件
        liObjs.onmouseover = function () {
            //先干掉所有背景颜色
            for (var j = 0; j < olObj.children.length; j  ) {
                olObj.children[j].removeAttribute("class");
            }
            //设置当前鼠标进来的类样式
            this.className = "current";
            //获取ol中li的索引值
             index = this.getAttribute("index");
            //移动ul
            animate(ulObj, -index * imgWidth);  //移动动画函数
        };
    }
    //设置第一个ol中li的背景颜色
    olObj.children[0].className = "current";

2.3 在<script>标签中添加如下js代码，实现无缝滚动就需要多一张图片才行，即克隆第一张图片，放到最后面。

//克隆ol中第一个li放到最后一个

代码语言：javascript复制

ulObj.appendChild(ulObj.children[0].cloneNode(true));

2.4在<script>标签中添加如下js代码，实现点击左右的按钮实现轮播。

代码语言：javascript复制

var timeId=setInterval(clickHandle,3000);
    my$("box").onmouseover=function(){
      arr.style.display="block";
      clearInterval(timeId);
    };
        //点击右边按钮
        my$("right").onclick=clickHandle;
        function clickHandle() {
            if (index==ulObj.children.length-1){
                ulObj.style.left=0 "px";
                index=0;
            }
            index  ;
            animate(ulObj,-index*imgWidth);
            if (index==list.length-1){
                olObj.children[0].className="current";
                olObj.children[olObj.children.length-1].className="";
            }else {
                for (var i=0;i<olObj.children.length;i  ){
                    olObj.children[i].className="";
                }
                olObj.children[index].className="current";
            }
        };
        //点击左边按钮
        my$("left").onclick=function () {
            if (index==0){
                index=list.length-1;
                ulObj.style.left=-index*imgWidth "px";
            }
            index--;
            animate(ulObj,-index*imgWidth);
            for (var i=0;i<olObj.children.length;i  ){
                olObj.children[i].className="";
            }
            olObj.children[index].className="current";
        };

2.5 在<script>标签中添加如下js代码，实现自动轮播，即可以创建一个定时器，每隔一段时间就调用左右按钮的点击事件，相当于点按钮，但是要注意的是当鼠标放进相框的时候要清除定时器，不然在你点击的时候它还是会自动轮播。

代码语言：javascript复制

my$("box").onmouseout=function(){
        arr.style.display="none";
        timeId=setInterval(clickHandle,3000);
    };
    // 设置一个元素，移动到指定位置
    function animate(element, target) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            var current = element.offsetLeft;
            var step = 9;
            step = current > target ? -step : step;
            current  = step;
            if (Math.abs(target - current) > Math.abs(step)) {
                element.style.left = current   "px";
            } else {
                clearInterval(element.timeId);
                element.style.left = target   "px";
            }
        }, 10);
    }  function my$(id) {      return document.getElementById(id);    }

2.6 以下代码为上面五个子步骤的完整js代码。

代码语言：javascript复制

<script>
    var index=0;
    //获取最外面的div
    var box = my$("box");
    //获取相框
    var inner = box.children[0];
    //获取去相框的宽度
    var imgWidth = inner.offsetWidth;
    // 获取ul
    var ulObj = inner.children[0];
    //获取ul中所有的li
    var list = ulObj.children;
    //获取ol
    var olObj = inner.children[1];
    //获取焦点
    var arr = my$("arr");
    //创建小按钮-----根据ul中li的个数
    for (var i = 0; i < list.length; i  ) {
        var liObjs = document.createElement("li");
        olObj.appendChild(liObjs);
        liObjs.innerHTML = (i   1);
        //在ol中每个li中增加自定义属性，添加索引值
        liObjs.setAttribute("index", i);
        //注册鼠标进入事件
        liObjs.onmouseover = function () {
            //先干掉所有背景颜色
            for (var j = 0; j < olObj.children.length; j  ) {
                olObj.children[j].removeAttribute("class");
            }
            //设置当前鼠标进来的类样式
            this.className = "current";
            //获取ol中li的索引值
             index = this.getAttribute("index");
            //移动ul
            animate(ulObj, -index * imgWidth);  //移动动画函数
        };
    }
    //设置第一个ol中li的背景颜色
    olObj.children[0].className = "current";
    //克隆ol中第一个li放到最后一个
    ulObj.appendChild(ulObj.children[0].cloneNode(true));
    var timeId=setInterval(clickHandle,3000);
    my$("box").onmouseover=function(){
      arr.style.display="block";
      clearInterval(timeId);
    };
        //点击右边按钮
        my$("right").onclick=clickHandle;
        function clickHandle() {
            if (index==ulObj.children.length-1){
                ulObj.style.left=0 "px";
                index=0;
            }
            index  ;
            animate(ulObj,-index*imgWidth);
            if (index==list.length-1){
                olObj.children[0].className="current";
                olObj.children[olObj.children.length-1].className="";
            }else {
                for (var i=0;i<olObj.children.length;i  ){
                    olObj.children[i].className="";
                }
                olObj.children[index].className="current";
            }
        };
        //点击左边按钮
        my$("left").onclick=function () {
            if (index==0){
                index=list.length-1;
                ulObj.style.left=-index*imgWidth "px";
            }
            index--;
            animate(ulObj,-index*imgWidth);
            for (var i=0;i<olObj.children.length;i  ){
                olObj.children[i].className="";
            }
            olObj.children[index].className="current";
        };
    my$("box").onmouseout=function(){
        arr.style.display="none";
        timeId=setInterval(clickHandle,3000);
    };
    // 设置一个元素，移动到指定位置
    function animate(element, target) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            var current = element.offsetLeft;
            var step = 9;
            step = current > target ? -step : step;
            current  = step;
            if (Math.abs(target - current) > Math.abs(step)) {
                element.style.left = current   "px";
            } else {
                clearInterval(element.timeId);
                element.style.left = target   "px";
            }
        }, 10);
    }  function my$(id) {      return document.getElementById(id);    }
</script>

五完整的代码

最后完整的html代码：

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      * {
      margin: 0;
      padding: 0;
      }
      /*<--清除底部三像素距离-->*/
      img {
      vertical-align: top;
      }
      .all {
      width: 550px;
      height: 320px;
      margin: 100px auto;
      padding: 5px;
      border: 1px solid #ccc;
      position: relative;
      }
      .inner {
      position: relative;
      width: 550px;
      height: 320px;
      background-color: pink;
      overflow: hidden;
      }
      .inner ul {
      width: 1000%;
      list-style: none;
      position: absolute;
      top: 0;
      left: 0;
      }
      .inner ul li {
      float: left;
      }
      .focusD {
      position: absolute;
      left: 0;
      top: 50%;
      width: 550px;
      padding: 0 10px;
      height: 30px;
      box-sizing: border-box;
      display: none;
      }
      .inner ol {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translate(-50%);
      }
      .inner ol li {
      justify-content: center;
      width: 15px;
      display: inline-block;
      height: 15px;
      margin: 0 3px;
      cursor: pointer;
      line-height: 15px;
      text-align: center;
      background-color: rgb(248, 247, 247);
      border-radius: 50%;
      }
      /*当前的高亮的小圆点*/
      .inner ol .current {
      background-color: orange;
      color: #fff;
      }
      .focusD span {
      display: inline-block;
      width: 25px;
      font-size: 24px;
      height: 30px;
      color: #ccc;
      line-height: 30px;
      text-align: center;
      background: rgba(255, 255, 255, 0.3);
      cursor: pointer;
      }
      #left {
      float: left;
      }
      #right {
      float: right;
      }
    </style>
  </head>
  <body>
    <h1>云起实验室</h1>
    <div id="box" class="all">
      <div class="inner">   <!-- 相框-->
        <ul>
          <li><a href="#"><img src="https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" width="550" height="320"  alt=""></a></li>
          <li><a href="#"><img src="https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" width="550" height="320" alt=""></a></li>
          <li><a href="#"><img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80" width="550" height="320" alt=""></a></li>
          <li><a href="#"><img src="https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" width="550" height="320" alt=""></a></li>
        </ul>
        <ol>  <!--里面存放小圆点-->
        </ol>
      </div>
      <div class="focusD" id="arr">
        <span id="left">&lt</span>
        <span id="right">&gt</span>
      </div>
    </div>
  </body>
  <script> 
  var index=0;
  //获取最外面的div
  var box = my$("box");
  //获取相框
  var inner = box.children[0];
  //获取去相框的宽度
  var imgWidth = inner.offsetWidth;
  // 获取ul
  var ulObj = inner.children[0];
  //获取ul中所有的li
  var list = ulObj.children;
  //获取ol
  var olObj = inner.children[1];
  //获取焦点
  var arr = my$("arr");
  for (var i = 0; i < list.length; i  ) {
  var liObjs = document.createElement("li");
  olObj.appendChild(liObjs);
  liObjs.innerHTML = (i   1);
  //在ol中每个li中增加自定义属性，添加索引值
  liObjs.setAttribute("index", i);
  //注册鼠标进入事件
  liObjs.onmouseover = function () {
  //先干掉所有背景颜色
  for (var j = 0; j < olObj.children.length; j  ) {
  olObj.children[j].removeAttribute("class");
  }
  //设置当前鼠标进来的类样式
  this.className = "current";
  //获取ol中li的索引值
  index = this.getAttribute("index");
  //移动ul
  animate(ulObj, -index * imgWidth);  //移动动画函数
  };
  }
  //设置第一个ol中li的背景颜色
  olObj.children[0].className = "current";
  //克隆ol中第一个li放到最后一个
  ulObj.appendChild(ulObj.children[0].cloneNode(true));
  var timeId=setInterval(clickHandle,3000);
  my$("box").onmouseover=function(){
  arr.style.display="block";
  clearInterval(timeId);
  };
  //点击右边按钮
  my$("right").onclick=clickHandle;
  function clickHandle() {
  if (index==ulObj.children.length-1){
  ulObj.style.left=0 "px";
  index=0;
  }
  index  ;
  animate(ulObj,-index*imgWidth);
  if (index==list.length-1){
  olObj.children[0].className="current";
  olObj.children[olObj.children.length-1].className="";
  }else {
  for (var i=0;i<olObj.children.length;i  ){
  olObj.children[i].className="";
  }
  olObj.children[index].className="current";
  }
  };
  //点击左边按钮
  my$("left").onclick=function () {
  if (index==0){
  index=list.length-1;
  ulObj.style.left=-index*imgWidth "px";
  }
  index--;
  animate(ulObj,-index*imgWidth);
  for (var i=0;i<olObj.children.length;i  ){
  olObj.children[i].className="";
  }
  olObj.children[index].className="current";
  };
  my$("box").onmouseout=function(){
  arr.style.display="none";
  timeId=setInterval(clickHandle,3000);
  };
  // 设置一个元素，移动到指定位置
  function animate(element, target) {
  clearInterval(element.timeId);
  element.timeId = setInterval(function () {
  var current = element.offsetLeft;
  var step = 9;
  step = current > target ? -step : step;
  current  = step;
  if (Math.abs(target - current) > Math.abs(step)) {
  element.style.left = current   "px";
  } else {
  clearInterval(element.timeId);
  element.style.left = target   "px";
  }
  }, 10);
  }  function my$(id) {      return document.getElementById(id);    }
  </script>
  </html>

总结

笔记属于个人的喜好，但是形成了自我的风格就是博文了。希望在记录自己博文道路越走越远。

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

2023腾讯·技术创作特训营第三期Html CSS JS

0 人点赞

前端分享｜Html+CSS+JS 实现轮播切换

一 创建一个Html网页文档

二 安装Http-server模块

三 Html标签轮播布局

四 使用css js实现轮播效果

五 完整的代码

总结

一创建一个Html网页文档

二安装Http-server模块

四使用css js实现轮播效果

五完整的代码