基于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:我们参照上图,基于上一个例子, ...
随机推荐
- SPI扩展点在业务中的使用及原理分析
1 什么是SPI SPI 全称Service Provider Interface.面向接口编程中,我们会根据不同的业务抽象出不同的接口,然后根据不同的业务实现建立不同规则的类,因此一个接口会实现多个 ...
- 谷歌浏览器和火狐浏览器如何查看HTTP协议？
按F12
- 如何理解微服务体系结构中的 CQRS
本文翻译自 How To Understand CQRS In Microservices Architecture,原作者 OLEKSII. 问题描述 在典型的软件应用程序中,有一个负责写入和读取操 ...
- 聊聊流式数据湖Paimon(一)
翻译自 Apache Paimon官方文档 概览 概述 Apache Paimon (incubating) 是一项流式数据湖存储技术,可以为用户提供高吞吐.低延迟的数据摄入.流式订阅以及实时查询能力 ...
- MinIO客户端之ping
MinIO提供了一个命令行程序mc用于协助用户完成日常的维护.管理类工作. 官方资料 mc ping 检查指定的MinIO节点的服务是否可用. 不带参数,命令如下: ./mc ping local1 ...
- 神经网络优化篇：详解梯度消失/梯度爆炸（Vanishing / Exploding gradients）
梯度消失/梯度爆炸 训练神经网络,尤其是深度神经所面临的一个问题就是梯度消失或梯度爆炸,也就是训练神经网络的时候,导数或坡度有时会变得非常大,或者非常小,甚至于以指数方式变小,这加大了训练的难度. 接 ...
- k8s~动态生成pvc和pv
有时,我们不想手动建立pv和pvc,这时,我们可以通过strongClass存储类来帮我们实现,动态建立pvc,并动态为它分配pv存储空间,我们以nfs为例,说一下动态分配在nfs存储截至上建立pv的 ...
- Windows Server 2012 R2 远程桌面服务部署指南
著作权归作者所有:来自51CTO博客作者mabofeng的原创作品,请联系作者获取转载授权,否则将追究法律责任 01-Windows Server 2012 R2 远程桌面服务部署指南文章来源:htt ...
- 神经网络优化篇：详解梯度检验（Gradient checking）
梯度检验 梯度检验帮节省了很多时间,也多次帮发现backprop实施过程中的bug,接下来,看看如何利用它来调试或检验backprop的实施是否正确. 假设的网络中含有下列参数,\(W^{[1]}\) ...
- Log4j2 漏洞复现GetShell
目录: 一.搭建环境 1. 首先拉一个docker镜像 2. 然后启动环境 二.获取shell 首先,试验一下DNSLog 1. 准备JNDI注入工具 下载 进入目录打包成jar包 2. 利用 生成p ...