首先是准备好的几张图片, 它们的路径是: "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg"

代码

最基本的 HTML 代码:

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Test</title>

  <link rel="stylesheet" href="css/index.css" />   <!--引入样式表-->

  <script src="js/index.js"></script>              <!--引入JS脚本, 脚本用来切换图-->

</head>

<body>

  <div id="test" class="slider">

    <img id="img1" src="img/1.jpg" class="current">

    <img id="img2" src="img/2.jpg">

    <img id="img3" src="img/3.jpg">

  </div>

  <button onclick="setCurrent(0)">1</button>      <!--在这里, onClick调用的是用于设置当前图片的方法, 传入参数为图片节点的索引-->

  <button onclick="setCurrent(1)">2</button>

  <button onclick="setCurrent(2)">3</button>

  <button onclick="setCurrent(3)">4</button>

  <button onclick="setCurrent(4)">5</button>

  <button onclick="setCurrent(5)">6</button>

  <script>

    setInterval(moveNext, 5000);      // 每隔5s, 切换到下一张图片

  </script>

</body>

</html>

引入的样式表:

.slider {                 /* 指定轮播图容器尺寸, 相对定位, 隐藏溢出内容 */

    width: 750px;

    height: 450px;

    position: relative;

    overflow: hidden;

}

.slider img {             /* 指定每一个图片的尺寸, 过渡时间, 绝对定位 */

    width: 100%;

    height: 100%;

    transition: all 0.5s;

    position: absolute;

}

.slider img {                           /* 指定所有图片水平位移-100% */

    transform: translateX(-100%);

}

.slider img.current {                   /* 指定带有current类的图片不进行水平移动 */

    transform: translateX(0);

}

.slider img.current~img{                /* 指定位于带有current类的图片之后的所有图片水平位移为100% */

    transform: translateX(100%);

}

.slider img.current,                    /* 指定带有current或last类的图片置顶 */

.slider img.last{

    z-index: 999;

}

引入的JavaScript:

function getImages() {

    return document.getElementById("test").querySelectorAll("img");       // 搜找该页面下轮播图容器中的所有img

}

function getCurrent() {

    return document.getElementById("test").querySelector("img.current");  // 搜找该页面下轮播图容器中当前展示的img

}

function setCurrent(index) {

    var imgs = getImages();

    var cur = getCurrent();

    imgs.forEach(v => v.className = "");   // 清空所有图片的类名

    cur.className = "last";                // 设置当前展示的图片的类名为 "last", 意为: "上一次展示的图片"

    imgs[index].className = "current";     // 设置要设置的图片的类名为 "current"

}

function moveNext() {          // 移动展示图片到下一个

    var imgs = getImages();

    var curIndex;

    for (curIndex = 0; curIndex < imgs.length; curIndex++) {

        if (imgs[curIndex].className == "current") {

            break;

        }

    }

    if (curIndex + 1 < imgs.length) {

        setCurrent(curIndex + 1);

    } else {

        setCurrent(0);

    }

}

原理

图片集为一个序列, 当前展示的图片在中间, 展示图片之前的图片则是在左边, 而之后的图片则是在右边.

任意设置一个图片为当前展示的图片(即设置类名为current), 那么该图片将移动到中间. 而其它的图片, 自然也会移动到它两边.

由于滑动时, 需要显示将要展示的图片, 以及将要隐藏的图片, 所以这两张图片需要置顶, 否则, 进行多张图片的切换时, 将由于默认层级关系而导致异常, 故设置 .current 与 .last 的 z-index 为 999.

效果

[Web] 通用轮播图代码示例的更多相关文章

  1. 木马轮播图代码Jq

    效果图(将就一下) <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 原生js简单轮播图 代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  3. JD轮播图代码

    <!DOCTYPE html>   <html>   <head>   <title>jd网站的轮播图效果</title>   <me ...

  4. 原生Js写轮播图代码

    html css js 在知道jQuery如何实现轮播效果的基础上,用js写代码 如图:标记这里的地方 理解一下 用到的知识: 1.HTML DOM 的appendChild() 和 removeCh ...

  5. js 轮播图代码

    js代码 (function(){ /** parent //父容器 changeTime //每次间隔几秒切换下一条 leaveTime //鼠标从小图上离开过后几秒继续切换 index //从第几 ...

  6. 轮播图适应代码jQ

    (function(){ var i = 0; var time ; $('.page-size').html('1'); var obj = $('.xst-scroll>li'); var ...

  7. js写的简单轮播图

    这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...

  8. ⒃bootstrap组件 轮播图 基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Js封装的动画函数实现轮播图

    ---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画         function ...

随机推荐

  1. PID算法验证

    算法: struct PID { float kp; float kpnfac; float ki; float kinfac; float kd; }; float gCurPPM = 1300; ...

  2. 学习java之基础语法（一）

    学习java之基础语法(一) 基本语法 编写 Java 程序时,应注意以下几点: 大小写敏感:Java 是大小写敏感的,这就意味着标识符 Hello 与 hello 是不同的. 类名:对于所有的类来说 ...

  3. 一文了解Python的迭代器的实现

    本文对迭代器的解释参考自:https://www.programiz.com/python-programming/iterator 最后自己使用迭代器实现一个公平洗牌类. 博主认为,理论来自实践,假 ...

  4. iot漏洞mips汇编基础

    1 基础概念 MIPS(Microprocessor without Interlocked Piped Stages architecture),是一种采取精简指令集(RISC)的处理架构,由MIP ...

  5. WIFI6 基本知识（二）

    WI-FI6核心技术 WI-FI6除了继承了WI-FI5的所有MIMO特性之外,还增加了许多针对高密部署场景的特性.以下是WI-FI6的核心新特性: OFDMA频分复用技术 DL/UL MU-MIMO ...

  6. mongoDB服务器连接不上Error: couldn't connect to server 127.0.0.1:27017, connection attempt failed: SocketException:

    一大早打开node项目就报错,终端报 UnhandledPromiseRejectionWarning: MongooseServerSelectionError: connect ECONNREFU ...

  7. IDEA的下载、安装与破解

    IDEA的下载.安装与破解 下载地址:https://www.jetbrains.com/idea/download/#section=windows 建议下载2018.2版本,方便破解 安装 一直下 ...

  8. idea添加本地文件约束（DTD）

    当我们做 xml 文件配置的时候,需要对其进行约束的配置 例如: hibernate 如果我们在联网的情况下是可以不添加配置文件约束的,红框内的 URL 会自动帮我们从网络上加载约束文件,但是没有网络 ...

  9. WorkSkill整理之 技能体系

  10. Balanced Diet Gym - 102220B

    题目链接:https://vjudge.net/problem/Gym-102220B 题意:每组数据 给了 N和M表示有M种类型的糖果,这些糖果一共N个.接下了是 M 组数据,表示如果你选第 i 中 ...