不务正业的第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. .NET周刊【11月第4期 2023-11-26】

    国内文章 万字长文:从 C# 入门学会 RabbitMQ 消息队列编程 https://www.cnblogs.com/whuanle/p/17837034.html 如题,详细的介绍RabbitMQ ...

  2. Cannot resolve symbol ‘c:forEach‘；Cannot resolve taglib with uri http://java.sun.com/jsp/jstl/corede

    #### Cannot resolve taglib with uri http://java.sun.com/jsp/jstl/core:等类似,都是因为 在jsp页面中加入<%@ tagli ...

  3. Python 潮流周刊第 30 期（摘要）

    本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...

  4. springboot的缓存和redis缓存，入门级别教程

    一.springboot(如果没有配置)默认使用的是jvm缓存 1.Spring框架支持向应用程序透明地添加缓存.抽象的核心是将缓存应用于方法,从而根据缓存中可用的信息减少执行次数.缓存逻辑是透明地应 ...

  5. Spring中Bean的加载方式~

    1.方式一:基于spring.xml方式配置Bean user import lombok.Data; /** * @author : ly */ @Data public class User { ...

  6. .NET周刊【12月第1期 2023-12-06】

    国内文章 .NET 与 OpenEuler 共展翅,昇腾九万里 https://www.cnblogs.com/shanyou/p/17858385.html 本文介绍了openEuler操作系统,它 ...

  7. bash shell笔记整理——linux时钟和hwclock命令

    Linux中的时钟 在linux中,分为了如下两种时钟: 系统时钟:由linux内核通过CPU的工作频率进行的计时. 硬件时钟:主板上的cmos芯片时钟,就是可以在bios中设定的时间.(RTC,re ...

  8. 数字孪生系统如何整合CesiumJS？整合后会产生怎样的化学反应？

    数字孪生有关的项目中,智慧城市一直是一个比较重要的类型,但是这类智慧城市项目往往包含了大量的GIS相关数据,例如倾斜摄影.DEM.DOM.地形数据等.这时,将GIS系统融合进数字孪生系统的需求就出现了 ...

  9. python tkinter 使用(七)

    python tkinter 使用(七) 本篇文章主要讲下tkinter 中的message 控件. Message控件可以用于在窗口中显示一段文本消息. 以下是个简单的例子: #!/usr/bin/ ...

  10. 支付宝 v3 验签如何实现

    上次给大家介绍了 支付宝 v3 自签名如何实现,这次顺便再把验签也写一下. 为什么要验签 说起为什么要验签,如果要详细一点解释的话,可以写很多很多...... 我们就简单一点来解释:验签可以证明接收到 ...