基于HTML，CSS & Javascript 实现图像的自动轮播和手动导航按钮
不务正业的第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 实现图像的自动轮播和手动导航按钮的更多相关文章
- 原创的基于HTML/CSS/JavaScript的层级目录树
之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- html,css.javascript
基本标签(a.p.img.li.table.div.span).表单标签.iframe.frameset.样式 1:Html (Hypertext Markup Language) 超文本标记语言 ...
- html+css+JavaScript实现爱恩斯坦棋游戏
title: "html+css+JavaScript实现爱恩斯坦棋游戏" author: Sun-Wind date: December 30, 2021 背景:本贴将基于前端的 ...
- JavaScript 对图像进行（追加，插入，替换，删除）
JavaScript 对图像进行(追加,插入,替换,删除) 本次所学内容: document.querySelector('.container') 这个是可以查找单个[id标签和class标签] d ...
- 基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- Vim下的Web开发之html,CSS,javascript插件
Vim下的Web开发之html,CSS,javascript插件 HTML 下载HTML.zip 解压HTML.zip,然后将里面的所有文件copy到C:\Program Files\Vim\vi ...
- 【Share Code | HTML & CSS & Javascript】动画片段幻灯片
[查看demo & 下载资源](https://zhaoshuquan.com/posts/15 介绍 本文使用"Pieces"库轻松实现动画片段幻灯片效果. 今天我们想向 ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...
随机推荐
- 多项目git账户用户名和邮箱设置以及局部github代理
因为公司使用自建的gitlab服务器所以需要配置两个git账户分别用来访问公司仓库和自己的github仓库. 前言: 首先给大家梳理一下多用户名或者说多邮箱使用git的理解误区.我们需要知道的是我们的 ...
- 有什么BI工具可以实现中国式报表？
BI(Business Intelligence)工具是指用于帮助企业收集.分析.处理和展示数据的软件工具,以支持企业决策制定和业务运营优化的技术系统. 中国式报表在BI工具中的实现主要涉及到对中国商 ...
- pta三次实验的总结
第一次pta作业 在pta第一次作业,因为是第一次作业所以大体是比较容易,但是也有几个要注意的点,就是两个double的值相加减相乘的值与实际值会有一定的误差,误差大小为0.0000001,所以在写p ...
- Winform 控件库 MaterialSkin.2 使用教程（鸿蒙字体版）
️MaterialSkin.2 控件库在之前的文章中已经介绍过了,就不啰嗦了 - > Winform 好看控件库推荐:MaterialSkin.2 ️官方库里使用的是 Google 的 Robo ...
- C# 提取PDF中指定文本、图片的坐标
获取PDF文件中文字或图片的坐标可以实现精确定位,这对于快速提取指定区域的元素,以及在PDF中添加注释.标记或自动盖章等操作非常有用.本文将详解如何使用国产PDF库通过C# 提取PDF中指定文本或图片 ...
- 文心一言 VS 讯飞星火 VS chatgpt （157）-- 算法导论12.3 4题
四.用go语言,删除操作可交换吗?可交换的含义是,先删除 x 再删除 y 留下的结果树与先除 y 再删除 x 留下的结果树完全一样.如果是,说明为什么? 否则,给出一个反例. 文心一言: 在Go语言中 ...
- 解决opencv测试时OpenCV Error: Unspecified error (The function is not implemented.的问题
在安装好opencv时,出现如下的报错信息: OpenCV Error: Unspecified error (The function is not implemented. Rebuild the ...
- Linux配置成代理服务器
简介: 代理服务器(Proxy Server)是一种位于计算机网络中的中间服务器,它充当了客户端和目标服务器之间的中介,用于转发客户端请求并获取目标服务器的响应.代理服务器的主要功能包括以下几点: 什 ...
- hszxoj 货车运输 [lca]
题目链接: hszxoj 货车运输 题目描述与思路 简化题目: 求 \(x\)到 \(y\) 两点间路径的边权最小值的最大值 与之前的最短路最大的不同是这道题是多源最短路,那么 \(spfa\) 就废 ...
- 【内核】ELF 文件执行流程
# ELF 文件分类 Linux中,ELF文件全称为:Executable and Linkable Format,主要有三种形式,分别是: 可执行文件 动态库文件(共享文件 .so) 目标文件(可重 ...