轮播图(教程)

2023-12-28 15:33:22

轮播图的制作

1.步骤
首先轮播图需要把外型搭建好（html+css）
然后再是js实现功能
2.理论层面上
说，浏览器中的网页html是网页的框架，css是修饰,js则是行为和动作
在网页中html是最重要的。
3.实际操作
从HTML讲起
代码如下：

  <body>
    <div class="box">
      <ul>
        <li><img src="./img/banner_1.png" /></li>
        <li><img src="./img/轮播图2.jpg" alt="" /></li>
        <li><img src="./img/轮播图3.jpg" alt="" /></li>
        <li><img src="./img/轮播图4.jpg" alt="" /></li>
      </ul>
      <div class="btn">
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
      </div>
      <ol class="circe"></ol>
    </div>
  </body>

其次是css布局

<style>
*{
    padding: 0;
    margin: 0;
}
.box{
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.box ul{
    width: 6000px;
    height: 100%;
    list-style: none;
    position: absolute;
    top: 0px;
    left: 0px;
}
.box ul>li{
    float: left;
}
.box ul>li img{
    width: 1200px;
    height: 500px;
}
.box .btn{
    width: 100%;
    position: absolute;
    top: 200px;
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}
.box .btn>div{
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
}
.box:hover .btn>div{
    display: block;
}
.box .circe{
    width: 200px;
    height: 25px;
    position: absolute;
    right: 30px;
    bottom: 25px;
    list-style: none;
    display: flex;
    justify-content: space-around;
}
.box .circe>li{
    width: 25px;
    height: 25px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
}
.box .circe>li.active{
    background-color: red;
}
</style>

js代码方面
下面是我亲自编写的轮播图工具函数

<script>
function animate(obj, target, callback) {
    //清除定时器防止再次运行的时候,上次定时器还在启动
       clearInterval(timer);
    //定义定时器
    var timer = setInterval(function () {
      //设定一次轮播的距离
      var disdance = (target - obj.offsetLeft) / 10;
      //进行上下取整操作
      disdance = disdance > 0 ? Math.ceil(disdance) : Math.floor(disdance);
      if (obj.offsetLeft == target) {
        clearInterval(timer);
        //返回调用此函数方法
        callback && callback();
      }
      //再让上面的距离对ul的left差生影响
      obj.style.left = obj.offsetLeft + disdance + "px";
    }, 30);
  }
</script>

主要核心代码:

<script>
 //获取元素
 var box = document.querySelector(".box");
 var ul = document.querySelector(".box ul");
 var li = ul.querySelectorAll("ul li");
 var left = document.querySelector(".left");
 var right = document.querySelector(".right");
 var $ol = document.querySelector(".circe");
 //获取图片的宽度
 var imgwidth = box.offsetWidth;
 //智能生成小圆点
 for (var i = 0; i < li.length; i++) {
   //创建小li
   var $li = document.createElement("li");
   //给每个小li添加一个自定义属性
   $li.setAttribute("data-time", i);
   //并将生成的小li添加给父元素ol
   $ol.appendChild($li);
   //使用事件委托给li的父元素ol让他来获取鼠标点击对象
   $ol.onclick = function (e) {
     e = e || window.Event;
     //获取鼠标点击对象自定义属性的值
     var index = e.target.getAttribute("data-time");
     for (var i = 0; i < this.children.length; i++) {
       this.children[i].className = "";
     }
     e.target.className = "active";
     // 然后给每个li绑定对应的图片
     animate(ul, -index * imgwidth);
   };
   $ol.children[0].className = "active";
 }
 //克隆第一张图片到ul的最后面
 var img = ul.children[0].cloneNode(true);
 ul.appendChild(img);
 //定义一个变量来计算图片滚过几张
 var index = 0;
 //定义一个变量让他控制小数点
 var circre = 0;
 //给向右的箭头添加点击事件
 right.onclick = function () {
   //判断轮播的个数是否到了我们克隆的第一张图片，是则使ul的left值为0
   if (index == ul.children.length - 1) {
     ul.style.left = 0 + "px";
     index = 0;
   }
   ++index;
   ++ circre;
   animate(ul, -index * imgwidth);
   //circre到达了最大值制动转换为0
   if (circre >= $ol.children.length) {
     circre = 0;
   }
   changecirce(circre);
 };
 //   给左侧添加点击事件
 left.onclick = function () {
   //判断轮播的个数是否到了我们的第一张图片，是则使ul的left值为-4800
   if (index == 0) {
     ul.style.left = -(ul.children.length - 1 * imgwidth) + "px";
     index = 4;
   }
   --index;
   --circre;
   animate(ul, -index * imgwidth);
     //circre小于最小值制动转换为3
     if (circre < 0) {
     circre = $ol.children.length-1;
   }
   changecirce(circre);
 };
 //自动轮播
 var imgtimer = setInterval(function () {
   right.onclick();
 }, 5000);
 //当我们的鼠标放在大盒子上的时候，取消自动轮播，离开，则反之
 box.onmouseover = function () {
   clearInterval(imgtimer);
 };
 box.onmouseout = function () {
   imgtimer = setInterval(function () {
     right.onclick();
   }, 5000);
 };
 //定义一个函数控制小圆圈
 function changecirce(cicle) {
 //排他思想
   for (var i = 0; i < $ol.children.length; i++) {
     $ol.children[i].className = "";
   }
   $ol.children[cicle].className = "active";
 }
</script>

上面是小编为大家准备好的轮播图，不懂得可以看注释

码农公寓

轮播图的制作

相关文章