不务正业的第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. Google Colab 现已支持直接使用 🤗 transformers 库

    Google Colab,全称 Colaboratory,是 Google Research 团队开发的一款产品.在 Colab 中,任何人都可以通过浏览器编写和执行任意 Python 代码.它尤其适 ...

  2. 解决yolo+cudnn+opencv+gpu的一些问题

    问题描述: 在makefile文件中修改GPU=1 CUDNN=1 OPENCV=1,然后重新make,执行命令时出现: Yolov3 darknet: ./src/cuda.c:36: check_ ...

  3. YOLO: Real-Time Object Detection 遇到的问题

    YOLO: Real-Time Object Detection 官方介绍的方法安装好了yolo之后,然后使用命令: ./darknet detect cfg/yolov3.cfg yolov3.we ...

  4. NetSuite 开发日记 —— 估价单（Estimate）新建项目（Project）自动填入项目字段

    Background 用户在估价单(Estimate)点击「项目」字段旁边+按钮新建项目(Project),在项目的自定义字段中自动填入估价单ID 用户在项目记录存在切换自定义表格行为 Analysi ...

  5. python 解析网址信息

    python 解析网址信息 本篇文章主要讲述python 中如何解析一个url的信息. 1: requests获取网页信息 #!/usr/bin/python3 # -*- coding: UTF-8 ...

  6. AES算法在网络安全中的应用：如何守护数据宝藏？

    摘要:高级加密标准(AES)是美国国家标准与技术研究所(NIST)用于加密电子数据的规范.本文从历史.算法原理.性能优势和应用等方面全面介绍了AES算法,旨在帮助读者更好地理解这一广泛应用的对称加密算 ...

  7. ElasticSearch-1

    原文链接:https://gaoyubo.cn/blogs/52ef5bf7.html 一.Elasticsearch 架构设计 Elasticsearch 架构层: Elasticsearch 五层 ...

  8. vue星星评分

    <template> <div> <div class="xx"> <div v-for="(i, index) in list ...

  9. Nignx快速入门

    Nginx快速入门 一.简介 产生的背景:当一台服务器同一时刻被大量客户端请求访问时,访问量超出服务器请求范围,服务器处理不过来,发生宕机或者丢失连接情况下,产生了Nignx反向代理技术. Nginx ...

  10. 一文掌握数仓中auto analyze的使用

    摘要:analyze执行的是否及时,在一定程度上直接决定了SQL执行的快慢. 本文分享自华为云社区<一文读懂autoanalyze使用[这次高斯不是数学家]>,作者: leapdb. an ...