首先是准备好的几张图片, 它们的路径是: "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. gitlab和gitlab项目迁移

    一.概述 原gitlab 操作系统:centos 6.9 版本:GitLab 社区版 10.5.1 安装方式:yum 新gitlab 操作系统:centos 7.6 版本:GitLab Communi ...

  2. STL容器整理

    1.vector c++STL中的可变长度数组,主要支持操作有:建立,添加到末尾,返回长度,调整大小,定义迭代器及对迭代器的具体操作.具体如下: 1.建立一个元素类型为int的可变长度数组v,最开始N ...

  3. 《C++ Primer》笔记 第8章 IO库

    iostream定义了用于读写流的基本类型,fstream定义了读写命名文件的类型,sstream定义了读写内存string对象的类型. 标准库使我们能忽略这些不同类型的流之间的差异,这是通过继承机制 ...

  4. 002-LED闪烁

    LED闪烁 功能:控制LED模块的小灯闪烁 #include<reg52.h> // 头文件 sbit LED = P2^0; // LED接低电平 void main() //主函数 { ...

  5. JVM 中的StringTable

    是什么 字符串常量池是 JVM 中的一个重要结构,用于存储JVM运行时产生的字符串.在JDK7之前在方法区中,存储的是字符串常量.而字符串常量池在 JDK7 开始移入堆中,随之而来的是除了存储字符串常 ...

  6. 元数据管理—动态表单设计器在crudapi系统中完整实现

    表单设计 在前面文章中,我们通过一系列案例介绍了表单设计的一些基本功能,表单设计起到非常重要作用,也是crudapi核心,所以本文会详细介绍表单设计中一些其它功能. 概要 表单字段column属性 列 ...

  7. Flink的日志配置

    ------------恢复内容开始------------ 介绍flink在本地运行和on yarn运行时的日志配置. 很多现代框架都是用门面模式进行日志输出,例如使用Slf4j中的接口输出日志,具 ...

  8. 【MaixPy3文档】写好 Python 代码！

    本文是给有一点 Python 基础但还想进一步深入的同学,有经验的开发者建议跳过. 前言 上文讲述了如何认识开源项目和一些编程方法的介绍,这节主要来说说 Python 代码怎么写的一些演化过程和可以如 ...

  9. cve-2019-2725 反序列化远程代码执行

    描述:部分版本WebLogic中默认包含的wls9_async_response包,为WebLogic Server提供异步通讯服务.由于该WAR包在反序列化处理输入信息时存在缺陷,攻击者可以发送精心 ...

  10. python基础学习之列表的功能方法

    列表:list 格式 li = [1,2,3,4,5,6] 列表内部随意嵌套其他格式:字符串.列表.数字.元组.字典. 列表内部有序,且内容可更改 a = [1,2,3,4]    a[0] = 5  ...