首先是准备好的几张图片, 它们的路径是: "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. Jenkins+Python自动化测试持续集成详细教程

    ​ Jenkins是一个开源的软件项目,是基于java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.由于是基于java开发因此它也依赖jav ...

  2. Hi3559AV100-自己编译了u-boot、kernel及rootfs后，出现烧写错误或者烧写后板载无法启动的解决思路

    这篇随笔主要给出了Hi3559AV100-自己编译了u-boot.kernel及rootfs后,出现烧写错误或者烧写后板载无法启动的解决思路. 问题 (1)对于 u-boot 为官方的,kernel ...

  3. mpvue 开发微信小程序搭建项目

    首先 mpvue 是一款基于vue的框架,mpvue 修改了 Vue.js 的 runtime 和 compile 实现,可以运行在小程序的环境中. 第一步:安装 vue-cli vue-cli是vu ...

  4. 【转载】快速理解android View的测量onMeasure()与MeasureSpec

    笔者之前有一篇文章已经使用onMeasure()解决了listview与scollview的显示冲突问题,博客地址如下: onMeasure简单方法 完美解决ListView与ScollView冲突问 ...

  5. docker在vulhub中的使用命令合集

          (1)docker  ps(查询 docker 进程的所有容器) (2)docker  info(查看docker详细信息) (3)service docker start(启动docke ...

  6. CRLF注入漏洞 -配置错误

    漏洞分析参考 https://i-beta.cnblogs.com/posts/edit 什么是CRLF? CRLF 指的是回车符(CR,ASCII 13,\r,%0d) 和换行符(LF,ASCII ...

  7. 前后端分离之DRF——1

    1. 作用 1. 序列化,序列化器会把模型对象转成字典,经过 response 以后变成 json 字符串 2. 反序列化,把客户端发送过来的数据,经过 request 以后变成字典,序列化器可以把字 ...

  8. js 获取树结构的节点深度

    需求:获取树结构的节点深度. 实现util.js: // 获取节点深度 参数为树结构array function getMaxFloor(treeData){ let deep = 0; functi ...

  9. 利用eigen库简单实现矩阵功能

    eigen是目前运行速度较快的C++矩阵运算库,而且其轻便小巧安装方便的特点简直是吸引人啊!特做此笔记,记录一下这个安装简单.体积轻巧.功能强大的C++库. 1. Download and Insta ...

  10. 冒泡排序算法的实现（Java）

    什么是冒泡排序 冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法.它重复地走访过要排序的元素列,依次比较两个相邻的元素,如果顺序(如从大到小.首字母从Z到A)错误就把他们交换 ...