首先是准备好的几张图片, 它们的路径是: "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. Prism.WPF -- Prism框架使用（上）

    本文参考Prism官方示例 创建Prism项目 将App.xaml中的WPF标准Application替换为PrismApplication,移除StartupUri属性: 将App.xaml.cs中 ...

  2. Python3.x 基础练习题100例（21-30）

    练习21: 题目: 猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不瘾,又多吃了一个第二天早上又将剩下的桃子吃掉一半,又多吃了一个.以后每天早上都吃了前 一天剩下的一半零一个.到第10天早上 ...

  3. Java垃圾回收机制详解

    前言 Java 相比 C/C++ 最显著的特点便是引入了自动垃圾回收 (下文统一用 GC 指代自动垃圾回收),它解决了 C/C++ 最令人头疼的内存管理问题,让程序员专注于程序本身,不用关心内存回收这 ...

  4. java 流程控制学习

    https://www.kuangstudy.com/course 用户交互Scanner import java.util.Scanner; public class Demo01 { public ...

  5. 2020年12月-第02阶段-前端基础-CSS Day04

    1. 浮动(float) 记忆 能够说出 CSS 的布局的三种机制 理解 能够说出普通流在布局中的特点 能够说出我们为什么用浮动 能够说出我们为什么要清除浮动 应用 能够利用浮动完成导航栏案例 能够清 ...

  6. 记录 Allsec 解题过程

    开局打开URL:http://119.3.191.245:65532/#/allsecPlayGame,前去做游戏 游戏URL:http://119.3.191.245:8877/Login.php ...

  7. 从一部电影史上的趣事了解 Spring 中的循环依赖问题

    title: 从一部电影史上的趣事了解 Spring 中的循环依赖问题 date: 2021-03-10 updated: 2021-03-10 categories: Spring tags: Sp ...

  8. 【odoo14】第四章、应用模型

    由于本章有包含很多基础知识,个人不会全部转化为自己的语言.直接机器翻译了(用斜体标注,机器翻译反而一字不落,我会过滤掉冗余的内容),虽然机翻,但会保证意思不会偏. 本章主要章节如下: 定义模型展示及顺 ...

  9. [THUPC2019] 找树

    一.题目 点此看题 二.解法 这道题很离谱啊,看上去是求一个最大值,其实是把生成树权值为 \(i\) 的个数都给算出来,因为权值很小. 既然是生成树可以考虑矩阵树定理,我们考虑他是求这样一个式子: \ ...

  10. java实现下载器（以及创建一个URL对象)

    java实现下载器(以及创建一个URL对象) 1.思路讲解: (1)注意路径:是网络路径噢 (2)创建创建网路协议对象(远程对象):HttpURLConnection urlConnection (3 ...