html简易幻灯片,web从零单排,做一个简单的幻灯片
我的First Blood。
学习javascript越来越吃力,以前需要实现什么功能,各种插件上,照着例子,直接复制粘贴,也不知道啥原理,现在后悔了,人总要为自己做过的一切买单,这么做是好事也是坏事,废话不多说,自己体会哈!
第一步 HTML
❮
❯
心路历程
先搞个盒子,把这些幻灯片的图片装起来,还要有左右滑动箭头,还有啥,就是切换的点点
接下来要搞样式了,想想我们一般刚打开一个幻灯片是什么样子,先写出来样式
第二布 写CSS
div,
body {
margin: 0;
padding: 0
}
div,
span {
box-sizing: border-box;
}
.main {
margin: 0 auto;
width: 70%;
margin-top: 30px;
}
.slide {
display: none;
}
.slideshow-container {
width: 100%;
height: 750;
overflow: hidden;
position: relative;
}
.slideshow-container img {
width: 100%;
height: 100%
}
.dot {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: #000;
cursor: pointer;
}
.dot:hover {
background: #696767;
}
.dot.active {
background: #fff;
border: 1px solid #000;
}
.prev {
color: #fff;
position: absolute;
top: calc(50% - 35px);
display: block;
padding: 20px;
cursor: pointer;
transition: all .3s;
left: 0;
font-size: 25px;
}
.prev:hover {
background: rgba(0, 0, 0, 0.5)
}
.next {
color: #fff;
position: absolute;
top: calc(50% - 35px);
right: 0;
display: block;
padding: 20px;
cursor: pointer;
transition: all .3s;
font-size: 25px;
}
.next:hover {
background: rgba(0, 0, 0, 0.5);
}
.fadeIn {
animation: myFadeIn 1.5s;
-webkit-animation: myFadeIn 1.5s;
}
@keyframes myFadeIn {
from {
opacity: 0.5;
}
to {
background: 1;
}
}
@-webkit-keyframes myFadeIn {
from {
opacity: 0.5;
}
to {
background: 1;
}
}
心路历程
表示首先要清除样式,然后开始。细说不来啊,中间加了个fadeIn过度下,显得不那么尴尬,那两个箭头用了绝对定位,垂直居中的一种top(calc)方法
第三步 写JS
var slideIndex = 1;
var slides = document.getElementsByClassName("slide");
var dots = document.getElementsByClassName("dot");
goSlide(1);
function prevSlide() {
goSlide(slideIndex - 1);
}
function nextSlide() {
goSlide(slideIndex + 1);
}
//switch to some slide
function goSlide(n) {
//考虑头尾
n = n == 0 ? slides.length : n;
n = n == (slides.length + 1) ? 1 : n;
//main
for (let i = 0; i < slides.length; i++) {
if (i == n - 1) {
slides[i].style.display = "block";
} else {
slides[i].style.display = "none";
}
}
for (let j = 0; j < dots.length; j++) {
if (j == n - 1) {
dots[j].className += dots[j].className.indexOf(" active") > 0 ? "" : " active";
} else {
dots[j].className = dots[j].className.replace(" active", "");
}
}
//赋值给index
slideIndex = n;
}
心路历程
首先我得解决,我想到哪一页就到哪一页,那我得知道当前页的页码slideIndex,所以我得先定义一下,初始为1,然后就可以写一个方法goSlide(n)去到哪一页的实现,接下来再考虑怎么去切换前一张和后一张,只要知道slideIndex那这个就很简单了,所以最后别忘了赋新的值给slideIndex
一个半调子程序员,基础很不扎实,第一次强迫自己写写文章,虽然很简单,相信自己跟着需求、逻辑走再难的路也能走通
html简易幻灯片,web从零单排,做一个简单的幻灯片相关推荐
- web从零单排,做一个简单的幻灯片
我的First Blood. 学习javascript越来越吃力,以前需要实现什么功能,各种插件上,照着例子,直接复制粘贴,也不知道啥原理,现在后悔了,人总要为自己做过的一切买单,这么做是好事也是坏事 ...
- web开发-前端作业-做一个简单网页
一.设计思路与主题 设计思路:一直在跟pink老师学前端,有次表单练习是关于相亲网站的,于是突发奇想,打算把这个东西完善一下,再玩个谐音梗"珍禽网"--真情网~(顺便交个作业)主要 ...
- JSP+Mysql 做一个简单的学生成绩查询web系统
IDEA基于JSP+Mysql 做一个简单的学生成绩查询web系统 目录 一.相关软件的下载和配置环境 Java环境的下载和配置 (1)IDEA的下载和安装 (2)JdK的安装 Tomcat的下载 ...
- 使用socket.io做一个简单的WEB聊天室
使用socket.io做一个简单的WEB聊天室(可消息私发) 1. 创建一个空的工程目录 空的目录命名为chat-web 2. 创建package.json 使用命令:npm init,会引导你设置p ...
- 程序猿修仙之路--数据结构之你是否真的懂数组? c#socket TCP同步网络通信 用lambda表达式树替代反射 ASP.NET MVC如何做一个简单的非法登录拦截...
程序猿修仙之路--数据结构之你是否真的懂数组? 数据结构 但凡IT江湖侠士,算法与数据结构为必修之课.早有前辈已经明确指出:程序=算法+数据结构 .要想在之后的江湖历练中通关,数据结构必不可少.数据 ...
- 【Python】如何用python做一个简单的输入输出交互界面?
看到知乎上有人在问,如何使用Python做一个简单的输入输出交互界面? 交互界面就涉及到GUI编程. Python有很多GUI框架,功能大同小异. 其中比较出名的有「PyQT」.**wxPython. ...
- python自己做个定时器_技术图文:如何利用 Python 做一个简单的定时器类?
原标题:技术图文:如何利用 Python 做一个简单的定时器类? 背景 今天在B站上看有关 Python 最火的一个教学视频 -- "零基础入门学习 Python",这也是我们 P ...
- java如何做网页_java怎么做一个简单网页?网页包括什么?
学了java程序之后,大家就可以将这些运用到生活中去,比如做一个简单的网页.正好也可以检测自己学了怎么样,那么接下来,我们就来给大家讲解一下这方面的内容. 用Java语言编写实现一个简单的WEB浏览器 ...
- Python开发——做一个简单的【表白墙】网站
前言 大家早好.午好.晚好吖 ❤ ~ 今天我们要用Python做Web开发,做一个简单的[表白墙]网站. 众所周知表白墙的功能普遍更多的是发布找人,失物招领, 还是一个大家可以跟自己喜欢的人公开表白的 ...
最新文章
- python学习手册条件-Python学习手册之控制结构(一)
- python好学嘛-Python对于没有计算机基础知识的人来说,好学吗?
- C3P0连接池的运用
- 2021夏季每日一题 【week2 未完结】
- 数据结构与算法 / 默克尔树
- oracle控制文件修复,oracle控制文件的损坏或完全丢失的恢复办法
- 不会卸载MySQL?我连夜肝了一篇教你如何干干净净地卸载掉MySQL
- 拉格朗日对偶(Lagrange duality)
- Java本地缓存技术选型(Guava Cache、Caffeine、Encache)
- jquery : 插件 jsgrid 范例
- Visual Studio 2008破解激活升级方法
- IDM chrome插件找不到
- javaSwing的JTextField自动补全
- 强化物联网连接 Silicon Labs收购Micrium
- docker的搭建和简单应用
- win7重装系统后计算机打不开,win7系统重装后进不了系统怎么办
- 压电式雨量传感器数字感知降雨量
- ros源码下载及编译
- 牛客 20859 兔子的名字
- 银联手机网页如何调用云闪付(银联钱包)