不务正业的第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. 实例讲解Python 解析JSON实现主机管理

    本文分享自华为云社区<Python 解析JSON实现主机管理>,作者: LyShark. JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它以易 ...

  2. 基于Docker Desktop搭建Kafka集群并使用Java编程开发

    一.引言 前段时间因课业要求使用Docker Desktop 部署Kafka集群并编写生产者消费者程序,折磨了我好几天,在查找大量资料后终于是把整个集群搭建完成了.现在我想要分享其中搭建的历程,希望能 ...

  3. Odoo16—权限控制

    odoo的权限控制是通过用户组来实现的,在用户组中配置控制权限,然后再添加用户到用户组中,从而实现对用户的访问和操作权限控制.一个用户可以属于多个用户组,用户最终的权限范围取决于所属用户组权限的并集. ...

  4. 【UniApp】-uni-app-项目实战页面布局(苹果计算器)

    前言 经过前面的文章介绍,基本上 UniApp 的内容就介绍完毕了 那么从本文开始,我们就开始进行一个项目的实战 这次做的项目是苹果计算器,这个项目的难度不是很大,但是也不是很简单,适合练手 创建项目 ...

  5. 华企盾DSC邮箱服务器测试连接提示Undefined error id（端口不通）

    解决方法:由于云服务器没有开25端口,telnet不通(telnet smtp.163.com 25),允许一下25端口即可,如果不能启用25端口,则开启465或者587

  6. shell中 << EOF 和 EOF 使用

    转载请注明出处: EOF(End of File)在Shell中通常用于指示输入的结束,并在脚本或命令中进行多行输入.它允许用户指定一个特定的分界符来表示输入的结束,通常用于创建临时文件.重定向输入或 ...

  7. IntelliJ IDEA官方宣布中文汉化包正式发布-intellijidea-guan-fang-xuan-bu-zhong-wen-han-hua-bao-zheng-shi-fa-bu

    title: IntelliJ IDEA官方宣布中文汉化包正式发布 date: 2021-07-27 16:42:21.823 updated: 2021-12-26 17:43:12.204 url ...

  8. Python笔记三之闭包与装饰器

    本文首发于公众号:Hunter后端 原文链接:Python笔记三之闭包与装饰器 这一篇笔记介绍 Python 里面的装饰器. 在介绍装饰器前,首先提出这样一个需求,我想统计某个函数的执行时间,假设这个 ...

  9. SQLite3使用笔记(1)——查询

    目录 1. 概述 2. 详论 2.1. 打开/关闭数据库 2.2. 数据查询 3. 参考 1. 概述 SQLite是一个嵌入式SQL数据库引擎.与大多数其他 SQL 数据库不同,SQLite 没有单独 ...

  10. MySQL基础篇：第九章_详解流程控制结构

    流程控制结构 系统变量 一.全局变量 作用域:针对于所有会话(连接)有效,但不能跨重启 查看所有全局变量 SHOW GLOBAL VARIABLES; 查看满足条件的部分系统变量 SHOW GLOBA ...