基于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:我们参照上图,基于上一个例子, ...
随机推荐
- 关于fstream对象的open方法报错183的问题
当使用fstream,ifstream,ofstream,这几种对象打开文件, 但文件已经存在的时候, 调用GetLastError()函数,会返回错误代码183, 这个代码代表该文件已经存在,是正常 ...
- RTMP协议学习——Message与Chunk解读
前言 之前通过对抓包数据的学习和分析,对RTMP协议有了一个整体的认知,大致了解了RTMP从建立连接到播放视频的流程,文章请看<RTMP协议学习--从握手到播放>.但是对于RTMP消息传输 ...
- 【UniApp】-uni-app概述
前言 好,经过我们前面文章的编写,大家可以了解到微信小程序开发相关的知识,了解完了这个微信小程序开发和云开发之后,从这篇文章开始,我再来给大家写一下关于 Uniapp 的知识. 好,开始,那什么是 U ...
- TIOBE 12月榜单: C# 即将成为2023 年度编程语言
TIOBE 公布了 2023 年 12 月的编程语言排行榜. 2022年C# 在挑战成为年度编程语言,但在最后一刻,C++出人意料地夺得了冠军.今年,我们确信 C# 将获胜成为2023年度编程语言.它 ...
- 【UniApp】-uni-app-CompositionAPI应用生命周期和页面生命周期
前言 好,经过上个章节的介绍完毕之后,了解了一下 uni-app-OptionAPI应用生命周期和页面生命周期 那么了解完了uni-app-OptionAPI应用生命周期和页面生命周期之后,这篇文章来 ...
- [AGC030D] Inversion Sum
Problem Statement You are given an integer sequence of length $N$: $A_1,A_2,...,A_N$. Let us perform ...
- 单元测试平台搭建：sonarQube+sonarScanner+Jenkins+jacoco
单元测试平台搭建及结果分析 一.方案 需求目标:提高单元测试覆盖率和规范代码编写规范 选用工具:Sonarqube.sonarqube Scanner.Jenkins.jacoco 方案: 工程中引入 ...
- SpringBoot整个RabbitMQ详细~
搭建环境 1.安装RabbitMQ,我是用的是Docker方式安装的,大家根据个人习惯自行安装哈 docker run -d -p 5672:5672 -p 15672:15672 --name ra ...
- 文心一言 VS 讯飞星火 VS chatgpt （163）-- 算法导论13.1 3题
三.用go语言,定义一棵松弛红黑树(relaxed red-black tree)为满足红黑性质 1.3.4 和5的二叉搜索树.换句话说,根结点可以是红色或是黑色.考虑一棵根结点为红色的松弛红黑树 T ...
- 解决 VM with version 2.1.0 has multidex support ; VM has multidex support, MultiDex support library is disabled.问题
发布打包完之后,android studio提示 VM with version 2.1.0 has multidex support I/MultiDex: installI/MultiDex: V ...