不务正业的第n天（划掉

2020年年末在完成Web网页制作课程的大作战，在写代码的时候想到用HTML + CSS & Javascript制作一个图片轮播功能增强网页的功能

简单贴一下代码：注释用了简单的英文，应该都能看懂

HTML

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

  <meta charset="utf-8">

  <title>Image Slider</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <!--image slider start-->

  <div class="slider">

    <div class="slides">

      <!--radio buttons start-->

      <input type="radio" name="radio-btn" id="radio1">

      <input type="radio" name="radio-btn" id="radio2">

      <input type="radio" name="radio-btn" id="radio3">

      <input type="radio" name="radio-btn" id="radio4">

      <!--radio buttons end-->

      <!--slide images start-->

      <div class="slide first">

        <img src="1.jpg" alt="">

      </div>

      <div class="slide">

        <img src="2.jpg" alt="">

      </div>

      <div class="slide">

        <img src="3.jpg" alt="">

      </div>

      <div class="slide">

        <img src="4.jpg" alt="">

      </div>

      <!--slide images end-->

      <!--automatic navigation start-->

      <div class="navigation-auto">

        <div class="auto-btn1"></div>

        <div class="auto-btn2"></div>

        <div class="auto-btn3"></div>

        <div class="auto-btn4"></div>

      </div>

      <!--automatic navigation end-->

    </div>

    <!--manual navigation start-->

    <div class="navigation-manual">

      <label for="radio1" class="manual-btn"></label>

      <label for="radio2" class="manual-btn"></label>

      <label for="radio3" class="manual-btn"></label>

      <label for="radio4" class="manual-btn"></label>

    </div>

    <!--manual navigation end-->

  </div>

  <!--image slider end-->

  <script type="text/javascript">

    var counter = 1;

    setInterval(function () {

      document.getElementById('radio' + counter).checked = true;

      counter++;

      if (counter > 4) {

        counter = 1;

      }

    }, 5000);

  </script>

</body>

</html>

CSS

body {

  margin: 0;

  padding: 0;

  height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  background: #23E3C9;

}

.slider {

  width: 800px;

  height: 500px;

  border-radius: 10px;

  overflow: hidden;

}

.slides {

  width: 500%;

  height: 500px;

  display: flex;

}

.slides input {

  display: none;

}

.slide {

  width: 20%;

  transition: 2s;

}

.slide img {

  width: 800px;

  height: 500px;

}

/*css for manual slide navigation*/

.navigation-manual {

  position: absolute;

  width: 800px;

  margin-top: -40px;

  display: flex;

  justify-content: center;

}

.manual-btn {

  border: 2px solid #40D3DC;

  padding: 5px;

  border-radius: 10px;

  cursor: pointer;

  transition: 1s;

}

.manual-btn:not(:last-child) {

  margin-right: 40px;

}

.manual-btn:hover {

  background: #40D3DC;

}

#radio1:checked~.first {

  margin-left: 0;

}

#radio2:checked~.first {

  margin-left: -20%;

}

#radio3:checked~.first {

  margin-left: -40%;

}

#radio4:checked~.first {

  margin-left: -60%;

}

/*css for automatic navigation*/

.navigation-auto {

  position: absolute;

  display: flex;

  width: 800px;

  justify-content: center;

  margin-top: 460px;

}

.navigation-auto div {

  border: 2px solid #40D3DC;

  padding: 5px;

  border-radius: 10px;

  transition: 1s;

}

.navigation-auto div:not(:last-child) {

  margin-right: 40px;

}

#radio1:checked~.navigation-auto .auto-btn1 {

  background: #40D3DC;

}

#radio2:checked~.navigation-auto .auto-btn2 {

  background: #40D3DC;

}

#radio3:checked~.navigation-auto .auto-btn3 {

  background: #40D3DC;

}

#radio4:checked~.navigation-auto .auto-btn4 {

  background: #40D3DC;

}

关于这个页面的改进点，可以在切换不同图片的时候自动切换背景图颜色来搭配图片。

这里只要改一下Javascript 和 CSS 的代码即可

基于HTML，CSS & Javascript 实现图像的自动轮播和手动导航按钮的更多相关文章

  1. 原创的基于HTML/CSS/JavaScript的层级目录树

    之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...

  2. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  3. html,css.javascript

    基本标签(a.p.img.li.table.div.span).表单标签.iframe.frameset.样式 1:Html  (Hypertext Markup Language) 超文本标记语言 ...

  4. html+css+JavaScript实现爱恩斯坦棋游戏

    title: "html+css+JavaScript实现爱恩斯坦棋游戏" author: Sun-Wind date: December 30, 2021 背景:本贴将基于前端的 ...

  5. JavaScript 对图像进行（追加，插入，替换，删除）

    JavaScript 对图像进行(追加,插入,替换,删除) 本次所学内容: document.querySelector('.container') 这个是可以查找单个[id标签和class标签] d ...

  6. 基于animation.css实现动画旋转特效

    分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  7. Vim下的Web开发之html,CSS,javascript插件

    Vim下的Web开发之html,CSS,javascript插件   HTML 下载HTML.zip 解压HTML.zip,然后将里面的所有文件copy到C:\Program Files\Vim\vi ...

  8. 【Share Code | HTML & CSS & Javascript】动画片段幻灯片

    [查看demo & 下载资源](https://zhaoshuquan.com/posts/15 介绍 本文使用"Pieces"库轻松实现动画片段幻灯片效果. 今天我们想向 ...

  9. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...

  10. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...

随机推荐

  1. Excel做数据分析？是真的很强!

    当涉及到数据分析时,Excel无疑是一个功能强大且广泛应用的工具.它提供了丰富的功能和灵活性,使得用户可以进行各种复杂的数据处理和分析.在本文中, 我将详细介绍Excel在数据分析领域的强大功能,包括 ...

  2. NodeJS下载安装

    一.什么是NodeJS? NodeJS是一个开源,跨平台的JavaScript运行环境 二.NodeJS安装包下载 1.打开网址:Node.js (nodejs.org) 2.下载稳定版本 三.Nod ...

  3. ElasticSearch索引生命周期策略配置（ES TTL）

    背景 有些索引数据作为临时数据存放,一段时间后我们希望索引可以自动过期删除,就是常说的TTL(Time To Live)机制 ElasticSearch索引数量过多会占用很多主分片和副本分片,最终导致 ...

  4. [ARC150F] Constant Sum Subsequence

    Problem Statement We have a sequence of positive integers of length $N^2$, $A=(A_1,\ A_2,\ \dots,\ A ...

  5. [CF1748F] Circular Xor Reversal

    题目描述 You have an array $ a_0, a_1, \ldots, a_{n-1} $ of length $ n $ . Initially, $ a_i = 2^i $ for ...

  6. HDU-2586 How far away？

    There are n houses in the village and some bidirectional roads connecting them. Every day peole alwa ...

  7. 三维GIS引擎用什么好？结合目前市面上的主流引擎进行分析

    相信大多数人在谈到三维GIS引擎时,第一个想到的首先是CesiumJS,CesiumJS以其免费开源的特点,快速占领了三维GIS这个领域,同时也催生了许多以CesiumJS为基础的衍生产品.Cesiu ...

  8. IDEA创建MyBatis项目--实现简单的查操作

    IDEA创建MyBatis项目--实现简单的查操作 1.创建一个maven工程,不使用模板 2.通过maven加载Mybatis依赖包 在pom文件中导入maven坐标 <dependencie ...

  9. B 树和 B+ 树及其实现

    B 树 B 树和一般的二叉树有许多相似的地方,二者都是为了加快查找的速度,不同之处在于 B 树是为了解决大量的数据而产生的,更加适合读取相对大的数据块的存储系统.B 树的每个节点一般不会存储实际的数据 ...

  10. BFS（一）单词接龙

    对应 LeetCode 127 单词接龙 问题定义 给定一个字典序列 wordList,一个初始的单词 beginWord 和一个目标单词 endWord,现在要求每次变换满足以下条件将 beginW ...