首先是准备好的几张图片, 它们的路径是: "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. Zeebe服务学习1-简单部署与实现demo

    1.Zeebe是什么? Camunda公司研发的工作流引擎Zeebe,目标是对微服务的编排.具体详细介绍可以参考官网:https://zeebe.io/what-is-zeebe/ 2.背景 随着微服 ...

  2. 03----python入门----函数相关

    一.前期知识储备 函数定义 你可以定义一个由自己想要功能的函数,以下是简单的规则: 函数代码块以 def 关键词开头,后接函数标识符名称和圆括号  () 任何传入参数和自变量必须放在圆括号中间,圆括号 ...

  3. PowerShell的使用

                一:基于winserver2008版本powershell2.0的升级(至4.0) (1)首先:查看各版本的Powershell版本,如下所示: (2)打开虚拟机winserv ...

  4. 趣谈 DHCP 协议，有点意思。

    计算机网络我也连载了很多篇了,大家可以在我的公众号「程序员cxuan」 或者我的 github 系统学习. 计算机网络第一篇,聊一聊网络基础 :计算机网络基础知识总结 计算机网络第二篇,聊一聊 TCP ...

  5. 我与FreeBSD的故事之一

    记得还是那些无聊的日子,群里有网友称Linux只能玩WPS,我表示质疑,并通过百度这个搜索引擎搜索到了Ubuntu Kylin,即由湖南的国防科技大学与Ubuntu社区合作并由其主导的Ubuntu麒麟 ...

  6. Codeforces Round #546 C. Nastya Is Transposing Matrices

    题面: 传送门 题目描述: 给出两个n x m的矩阵A,B.矩阵A可以把正方子矩阵进行"转置操作",问:可不可以对矩阵A进行多次这样的操作,使矩阵A变为矩阵B?   题目分析: 这 ...

  7. P1962 斐波那契数列 【矩阵快速幂】

    一.题目 P1962 斐波那契数列 二.分析 比较基础的递推式转换为矩阵递推,这里因为$n$会超出$int$类型,所以需要用矩阵快速幂加快递推. 三.AC代码 1 #include <bits/ ...

  8. python matrix转list

    a = [[1,2],[3,4]] a = np.mat(a) print(a.getA().tolist())

  9. python打印9宫格25宫格81宫格.....

    """ 2 问题描述: 3 给定一个奇数(num),生成一个横竖斜加起来的和相等 4 问题解析: 5 这其实就是一个九宫格的问题 6 九宫格问题的解答技巧: 7 1要放在 ...

  10. 从键盘读入学生成绩，找出最高分， 并输出学生成绩等级（Java）

    从键盘读入学生成绩,找出最高分, 并输出学生成绩等级 一.题目 从键盘读入学生成绩,找出最高分,并输出学生成绩等级. 成绩>=最高分-10 等级为'A' 成绩>=最高分-20 等级为'B' ...