利用原生JS实现轮播图

最新推荐文章于 2020-05-31 19:40:53 发布

旭氏美术馆

最新推荐文章于 2020-05-31 19:40:53 发布

阅读量422

点赞数

分类专栏： js css 文章标签： js 轮播图前端

本文链接：https://blog.csdn.net/ChenXvYuan_001/article/details/90451607

版权

js 同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

写在前面：

利用原生js实现轮播图，没有用任何框架

之前有人说，来前端面试前，先实现一个js写轮播图吧

最近刷了一套百度笔试题全球，其中就有这样一道编程题

说起来很简单，但自己动手实现一下还是很有必要的

原理：

一行多个内容，通过移动这一行，只显示某一个部分

效果:

在这里插入图片描述

代码：

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>sliider</title>
    <link rel="stylesheet" href="static/slider.css" />
     
  </head>
  <body>
    <!-- 轮播图容器 -->
    <div id="container">
      <!-- 轮播内容容器，实际上是一行多个照片 -->
      <div id="wrap" style="left:-500px">
        <!-- 虽然有三个内容，但分别在这三个左右多放一个，用作进行循环的标志 -->
        <div class="item">
          <img src="./static/img/3.jpg" />
        </div>

        <div class="item">
          <img src="./static/img/1.jpg" />
        </div>
        <div class="item">
          <img src="./static/img/2.jpg" />
        </div>
        <div class="item">
          <img src="./static/img/3.jpg" />
        </div>

        <div class="item">
          <img src="./static/img/1.jpg" />
        </div>
      </div>
      <!--显示目前的展示项  -->
      <div class="btns">
        <span>1</span>
        <span>2</span>
        <span>3</span>
      </div>

      <!-- 左右切换按钮 -->
      <button id="left" onclick="slideLeft()"><</button>
      <button id="right" onclick="slideRight()">></button>
    </div>

    <script src="static/slider.js"></script>
  </body>
</html>

css

#container {
  position: relative;
  height: 200px;
  width: 500px;
  border: 1px solid black;
  overflow: hidden;
}
.item {
  height: 198px;
  width: 498px;
  border: 1px solid pink;
  position: relative;
  margin: 0px;

  z-index: -99;
}
#wrap {
  padding: 0px;

  display: -webkit-box;
  position: absolute;
  left: 0;
}

.btns {
  margin-top: 180px;
  margin-left: 50%;
  z-index: 999;
}
#left {
  position: absolute;
  margin-top: -100px;
}
#right {
  position: absolute;
  margin-top: -100px;
  margin-left: 450px;
}

javascript


// 拿到一行排列的所有内容项
var wrap = document.getElementById("wrap");
//当前项显示，是一个数组
var span = document.getElementsByTagName("span")
//向左
function slideLeft() {
    //如果到最左，触发循环
    if (wrap.style.left == '0px') {
        wrap.style.left = '-1000px'
        //每点击一次，向左移动一个item单项
    } else {
        var newLeft = parseInt(wrap.style.left) + 500;
        wrap.style.left = newLeft + 'px';


    }
    //通过位置，得到当前是哪一项
    var index = getCurrentIndex(wrap.style.left);
    //对当前项变色
    span[index - 1].style.color = 'pink';
    //非当前项褪色
    for (let i = 0; i < span.length; i++) {
        if (i != index - 1) {
            span[i].style.color = 'black';
        }
    }


}

//向右，与向左原理相似。不同在最右时触发循环
function slideRight() {
    if (wrap.style.left == '-2000px') {
        wrap.style.left = '-1000px';

    } else {
        var newRight = parseInt(wrap.style.left) - 500;
        wrap.style.left = newRight + 'px';


    }

    var index = getCurrentIndex(wrap.style.left);

    span[index - 1].style.color = 'pink';

    for (let i = 0; i < span.length; i++) {
        if (i != index - 1) {
            span[i].style.color = 'black';
        }
    }

}
//拿到当前项
function getCurrentIndex(left) {
    var nowIndex = parseInt(left.split('p')[0]) / 500;
    //循环原理
    if (nowIndex == -4) {
        nowIndex = 1
    }
    if (nowIndex == 0) {
        nowIndex = 3;
    }

    if (nowIndex < 0) {
        nowIndex = -nowIndex;
    }
    return nowIndex;

}
//定时器，4s定时切换
setInterval(() => {
    slideLeft()
}, 4000)

旭氏美术馆

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
利用原生JS实现轮播图

写在前面：利用原生js实现轮播图，没有用任何框架之前有人说，来前端面试前，先实现一个js写轮播图吧最近刷了一套百度笔试题全球，其中就有这样一道编程题说起来很简单，但自己动手实现一下还是很有必要的原理：一行多个内容，通过移动这一行，只显示某一个部分效果:代码：html<!DOCTYPE html><html> <head> &l...
复制链接

扫一扫