不务正业的第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. 【GIT】学习day01 | 内嵌git安装教程【外包杯】

    Git是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理 第一步:下载Git 下载地址https://git-scm.com/downloads 如果出现下面这种情况无法 ...

  2. 35个超实用excel快捷键

    以下是一些常用的Excel快捷键,希望对你有所帮助.如果你想要了解更多快捷键,可以参考Excel的官方文档或者在网上搜索相关信息. Ctrl + C:复制选定的单元格或单元格范围. Ctrl + X: ...

  3. [ARC105E] Keep Graph Disconnected

    题目链接 好题. 如果 \(1\) 和 \(n\) 一直联通,开始即结束. 如果 \(n\mod 4=1\),那么 \(\frac 12x(x+1)+\frac12(n-x)(n-x+1)\) 为偶数 ...

  4. 新冠肺炎病毒（Covid-19）检测系统

    一 .背景 新冠肺炎是一种新的呼吸道疾病,它由新型冠状病毒引起,而这种病毒以前从未在人类身上发现 过.新冠肺炎如何传播? 新冠肺炎很容易通过与新冠肺炎患者的密切接触(距离约 6 英尺或两臂长范围内)在 ...

  5. Shell下处理JSON数据工具向导

    目录 下载离线安装包 安装 源码包安装 选项及含义 JQ 程序代码演示在线平台 JQ 语法 基本过滤器 身份运算符 --- . 标识符-索引 --- .foo`, `.foo.bar 对象索引 --- ...

  6. LLaMA大型语言模型

    LLaMA (Large Language Model Meta AI)是Meta公司发布的大型语言模型系列,近日LLaMA种子文件被合并到了GitHub 上,同时一些项目维护者给予了批准,目前该项目 ...

  7. 【笔记】Ribbon负载均衡伪随机算法

    伪随机:思路 当一个下标(伪服务)连接被调用两次,第三次如果还是它,就让再随机一次 当重复随机到一台服务两次时判断第三次是否还是它 是的话 我们要进行 再次随机 也就是第三次 package top. ...

  8. STM32CubeMX教程1 工程建立

    1.准备材料 开发板(STM32F407G-DISC1) ST-LINK/V2驱动 STM32CubeMX软件(Version 6.10.0) keil µVision5 IDE(MDK-Arm) 2 ...

  9. JavaFx之WebView（二十五）

    JavaFx之WebView(二十五) jfx的web引擎已经几百年没更新,早就放弃了,写写demo还是不错.jdk8u202还能跑vue 3.0项目 import javafx.applicatio ...

  10. electron入门之创建新窗口remote（一）

    electron入门到入土,从渲染线程中创建新窗口.2022-03-21入门版本17.1.2 electron重要概念,只有一个主线程,其他都是渲染进程或者叫子线程,他们不能直接相互操作,可以通过ip ...