第一步 HTML我的First Blood。
学习javascript越来越吃力,以前需要实现什么功能,各种插件上,照着例子,直接复制粘贴,也不知道啥原理,现在后悔了,人总要为自己做过的一切买单,这么做是好事也是坏事,废话不多说,自己体会哈!
心路历程
先搞个盒子,把这些幻灯片的图片装起来,还要有左右滑动箭头,还有啥,就是切换的点点
接下来要搞样式了,想想我们一般刚打开一个幻灯片是什么样子,先写出来样式
心路历程
表示首先要清除样式,然后开始。细说不来啊,中间加了个fadeIn过度下,显得不那么尴尬,那两个箭头用了绝对定位,垂直居中的一种top(calc)方法
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
一个半调子程序员,基础很不扎实,第一次强迫自己写写文章,虽然很简单,相信自己跟着需求、逻辑走再难的路也能走通
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/87298.html
摘要:函数更多的用处在于封装一些需要加前缀的属性,或是多个参数的属性,同时命名一定要足够的语义化。适当嵌套,以保持的优雅。有时要考虑兼容性,需要避免编译某条属性,方法即在值的前面加一个符号具体如下安装同时推荐在线编译网站,能够实时看到效果。 LESS 是一门CSS预编译语言,犹记得当初打算使用CSS预编译语言的时候,可选的有SASS、LESS、Stylus三门,刚好那个时候在学习bootst...
摘要:前言只有光头才能变强好的,今天我们要上铂金段位了,如果还没经历过青铜和白银和黄金阶段的,可以先去蹭蹭经验再回来从零单排学青铜从零单排学白银从零单排学黄金这篇文章主要讲的是主从复制。 前言 只有光头才能变强 好的,今天我们要上铂金段位了,如果还没经历过青铜和白银和黄金阶段的,可以先去蹭蹭经验再回来: 从零单排学Redis【青铜】 从零单排学Redis【白银】 从零单排学Redis【黄金...
摘要:因为我希望这是一个系列的文章,所以开始之前先简单说一下,我几乎没用过这个框架写过项目,所以文章中难免会有一些比较外行的说法。先整理用法,然后再整理自己的框架。 因为我希望这是一个系列的文章,所以开始之前先简单说一下,我几乎没用过vue这个框架写过项目,所以文章中难免会有一些比较外行的说法。当然,我用过一些时间的angular,也曾经解决过一些同行们vue方面的问题。所以如果有人原因看的...
阅读 1506·2023-04-26 02:03
阅读 4665·2021-11-22 13:53
阅读 4528·2021-09-09 11:40
阅读 3745·2021-09-09 09:34
阅读 2104·2019-08-30 13:18
阅读 3467·2019-08-30 11:25
阅读 3279·2019-08-26 14:06
阅读 2515·2019-08-26 13:52