原生js实现功能完整轮播图（自动轮播和焦点单击轮播共同实现）

最新推荐文章于 2024-06-17 15:29:34 发布

前端-阿来

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量833

点赞数 2

文章标签：原生js轮播图完整轮播图自动轮播 js学习 javascript

本文链接：https://blog.csdn.net/weixin_43482353/article/details/98464998

版权

原生js实现功能完整轮播图（自动轮播和点击轮播共同实现）

首先我们来看一下效果图：

1.打开界面自动播放
在这里插入图片描述
2.当鼠标移入时，自动播放停止，显示左右点击按钮；

接着我们来看详细代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="main.css">
  <title>美女轮播图</title>
</head>
<body>
  <div class="all" id="box">
    <div class="screen">
      <ul>
        <li><img src="meinv/11.jpg" alt=""></li>
        <li><img src="meinv/22.jpg" alt=""></li>
        <li><img src="meinv/33.jpg" alt=""></li>
        <li><img src="meinv/44.jpg" alt=""></li>
        <li><img src="meinv/55.jpg" alt=""></li>
        <li><img src="meinv/66.jpg" alt=""></li>
      </ul>
      <ol>
      </ol>
    </div>
    <div id="arr">
      <span id="left">&lt;</span><span id="right">&gt;</span>
    </div>
  </div>
  <script src="index.js"></script>
  <script>
    //只要改变ul位置就能实现轮播
    var box = myid$("box"); //获取相框
    var inner = box.children[0]; //第一个子元素
    var ulObj = inner.children[0]; //获取ul
    var imgWidth = inner.offsetWidth; //获取图片宽度
    var list = ulObj.children; //获取li
    var olObj = inner.children[1]; //获取ol
    var pic = 0;
    for (let i = 0; i < list.length; i++) {
      var liObj = document.createElement("li"); //创建元素
      olObj.appendChild(liObj); //插入元素
      liObj.innerHTML = (i + 1); //设置内容
      liObj.setAttribute("index", i); //设置自定义属性
      //设置鼠标移入事件
      liObj.onmouseover = function () {
        for (let j = 0; j < olObj.children.length; j++) {
          olObj.children[j].className = null;//遍历全部干掉样式
        }
        this.className = "current";//设置当前对象样式
        pic = this.getAttribute("index");//获取pic
        animate(ulObj, -pic * imgWidth);//设置动画
      };
    };
    //设置ul中第一个li的样式
    olObj.children[0].className = "current";
    //克隆一个ul中第一个li,加入到ul中的最后
    //cloneNode()表示克隆参数true表示全部克隆 false表示克隆标签不带属性
    //相当于把第一张图片在最后又加了一个li显示
    ulObj.appendChild(ulObj.children[0].cloneNode(true));

    function f1() {
      if (pic == list.length - 1)//此时list长度为本身长度加1 所以倒数二张图片就是轮播的最后一张图
      {
        pic = 0;//归零
        ulObj.style.left = 0 + "px"; //直接回到第一张
      }
      pic++;//否则加加 播放下一张图片
      animate(ulObj, -pic * imgWidth);//调用动画
      if (pic == list.length - 1)//同理设置样式
      {
        olObj.children[olObj.children.length - 1].className = null;//此时pic等于6，但是设置样式是0-5所以这里干掉是最后一个的样式
        //第一个按钮颜色设置上
        olObj.children[0].className = "current";
      } else {
        //干掉所有的小按钮的背景颜色
        for (var i = 0; i < olObj.children.length; i++) {
          olObj.children[i].className = null;
        }
        olObj.children[pic].className = "current";
      }
    };
    var arr = myid$("arr");
    var timeId = setInterval(f1, 1000);
    //设置鼠标移入显示同时干掉定时器的自动播放
    box.onmouseover = function () {
      arr.style.display = "block";
      clearInterval(timeId);
    };
    //鼠标移出隐藏同时启动定时器
    box.onmouseout = function () {
      arr.style.display = "none";
      timeId = setInterval(f1, 1000);
    };
    //右边点击向右移动
    myid$("right").onclick = f1; 
    //向左移动
    myid$("left").onclick = function () {
      if (pic == 0) {
        // console.log(list.length);
        // console.log(olObj.children.length);
        pic = olObj.children.length;
        ulObj.style.left = -pic * imgWidth + "px";
      }
      pic--;
      animate(ulObj, -pic * imgWidth);
      //设置小按钮的颜色---所有的小按钮干掉颜色
      for (var i = 0; i < olObj.children.length; i++) {
        olObj.children[i].className = null;
      }
      //当前的pic索引对应的按钮设置颜色
      olObj.children[pic].className = "current";
    };
  </script>
</body>
</html>

再来看看css代码：

* {
      margin: 0 auto;
      padding: 0px;
      list-style: nono;
      border: 0px;
    }

    #box {
      position: relative;
      width: 400px;
      height: 640px;
      padding: 5px;
      border: 1px solid #666;
      margin: 100px auto;
    }

    .screen {
      position: relative;
      width: 400px;
      height: 640px;
      overflow: hidden;
    }

    .screen ul li {
      float: left;
      width: 400px;
      height: 640px;
      overflow: hidden;
    }

    .screen ul {
      position: absolute;
      width: 3000px;
      left: 0px;
      top: 0px;
    }

    img {
      width: 400px;
      height: 640px;
    }

    .all ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }

    .all ol li {
      float: left;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      list-style-type: none;
      cursor: pointer;
      border-radius: 5px;
    }

    .all ol li.current {
      background: #DB192A;
    }

    #arr {
      display: none;
    }

    #arr span {
      width: 40px;
      height: 60px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -30px;
      background: #000;
      cursor: pointer;
      line-height: 60px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
      border-radius: 5px;
    }

    #arr #right {
      right: 5px;
      left: auto;
    }

再来看看我封装的代码：

function myid$(myid) {
    var id = myid;
    return document.getElementById(id);
};
//设置任意的一个元素, 移动到指定的目标位置
//封装的动画函数
function animate(element, target) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
        //获取元素的当前的位置,数字类型
        var current = element.offsetLeft;
        //每次移动的距离
        var step = 10;
        step = current < target ? step : -step;
        //当前移动到位置
        current += step;
        if (Math.abs(current - target) > Math.abs(step)) {
            element.style.left = current + "px";
        } else {
            //清理定时器
            clearInterval(element.timeId);
            //直接到达目标
            element.style.left = target + "px";
        }
    }, 10);
};

如有不清楚欢迎留言，想要源文件也可以给博主留言；
附资源地址：js轮播图

想免费获取的请留言。

前端-阿来

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生js实现功能完整轮播图（自动轮播和焦点单击轮播共同实现）

原生js实现功能完整轮播图（自动轮播和点击轮播共同实现）首先我们来看一下效果图：1.打开界面自动播放2.当鼠标移入时，自动播放停止，显示左右点击按钮；接着我们来看详细代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi...
复制链接

扫一扫