基于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:我们参照上图,基于上一个例子, ...
随机推荐
- 【Spring Boot】【外包杯】学习day01 | 项目目录结构划分以及代码分层
起因:扒了一个开源的项目,但是啃起来很硬,所以决定开始学习相关的知识. 我们之前的SSM项目,搭建过程较为繁琐: 1)配置 web.xml,加载 spring 和 spring mvc 2)配置数据库 ...
- java 405_Http状态405-方法不允许
解决方法: 删除下列代码. super.doGet(req.resp); super.doPost(req.resp); 分析: 405错误一般指请求method not allowed 错误. 请求 ...
- MySQL 有哪些常见的面试题
MySQL 是一种常用的关系型数据库管理系统,在面试过程中经常会涉及与 MySQL 相关的问题.以下是一些常见的 MySQL 面试题: 1. 介绍一下 MySQL 和其他数据库管理系统的区别. - M ...
- Flink State 状态原理解析
一.Flink State 概念 State 用于记录 Flink 应用在运行过程中,算子的中间计算结果或者元数据信息.运行中的 Flink 应用如果需要上次计算结果进行处理的,则需要使用状态存储中间 ...
- 【总结】IntelliJ IDEA 插件
1..iBATIS/MyBatis plugin轻松通过快捷键找到MyBatis中对应的Mapper和XML,CTRL+ALT+B 2.iBATIS/MyBatis plugin轻松通过快捷键找到My ...
- 从零开始封装 vue 组件
对于学习 Vue 的同学来说,封装 vue 组件是实现代码复用的重要一环.在 Vue 官网中非常详细地介绍了 vue 组件的相关知识,我这里简单摘取使用最频繁的几个知识点,带大家快速入门 vue 组件 ...
- 浅析 ArrayList
by emanjusaka from https://www.emanjusaka.top/2023/12/java-arrayList 彼岸花开可奈何 本文欢迎分享与聚合,全文转载请留下原文地址. ...
- Selenium查找元素、元素的属性和方法
查找元素 官方文档:https://www.selenium.dev/documentation/webdriver/elements/locators/ 一般通过find_element或者find ...
- ElasticSearch之cat master API
命令样例如下: curl -X GET "https://localhost:9200/_cat/master?v=true&pretty" --cacert $ES_HO ...
- EvilBox : ONE - WriteUp
EvilBox : ONE 信息收集 扫描网段内存活主机,得到目标 nmap 进一步收集有效信息,只开放了22和80 访问80的页面没有什么有效信息 接着扫一下目录, 没有敏感的文件 在robots中 ...