web从零单排，做一个简单的幻灯片

SexySix 发布于2019-08-21 11:56 / 1561人阅读

我的First Blood。
学习javascript越来越吃力，以前需要实现什么功能，各种插件上，照着例子，直接复制粘贴，也不知道啥原理，现在后悔了，人总要为自己做过的一切买单，这么做是好事也是坏事，废话不多说，自己体会哈！

第一步 HTML

心路历程
先搞个盒子，把这些幻灯片的图片装起来，还要有左右滑动箭头，还有啥，就是切换的点点
接下来要搞样式了，想想我们一般刚打开一个幻灯片是什么样子，先写出来样式

第二布写CSS

心路历程
表示首先要清除样式，然后开始。细说不来啊，中间加了个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

一个半调子程序员，基础很不扎实，第一次强迫自己写写文章，虽然很简单，相信自己跟着需求、逻辑走再难的路也能走通

私有云 GPU服务器一个幻灯片简单的web开发问题简单的web服务器最简单的web服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87298.html

从零单排之CSS3

摘要：概览大法好今夜秋风阵阵，雾霾层层。布局选择多媒体，字体响应就是屌。说起来条目繁多，乍看之下与之前比起来复杂了好多。圆角指的即使一般正式的写法为效果请看任意一个按钮即可写到此处不禁跟大家说，最好还是配合预编译来写。 CSS3 概览 showImg(https://segmentfault.com/img/bVddDt); CSS3大法好今夜秋风阵阵，雾霾层层。不禁让人想作诗，不过...

刘福 2019-08-28 17:59 评论0 收藏0
前端从零单排之LESS（第四期)

摘要：函数更多的用处在于封装一些需要加前缀的属性，或是多个参数的属性，同时命名一定要足够的语义化。适当嵌套，以保持的优雅。有时要考虑兼容性，需要避免编译某条属性，方法即在值的前面加一个符号具体如下安装同时推荐在线编译网站，能够实时看到效果。 LESS 是一门CSS预编译语言，犹记得当初打算使用CSS预编译语言的时候，可选的有SASS、LESS、Stylus三门，刚好那个时候在学习bootst...

Drummor 2019-08-28 17:55 评论0 收藏0
从零单排学Redis【铂金一】

摘要：前言只有光头才能变强好的，今天我们要上铂金段位了，如果还没经历过青铜和白银和黄金阶段的，可以先去蹭蹭经验再回来从零单排学青铜从零单排学白银从零单排学黄金这篇文章主要讲的是主从复制。前言只有光头才能变强好的，今天我们要上铂金段位了，如果还没经历过青铜和白银和黄金阶段的，可以先去蹭蹭经验再回来：从零单排学Redis【青铜】从零单排学Redis【白银】从零单排学Redis【黄金...

wizChen 2019-08-16 13:52 评论0 收藏0
从零单排系列之写一个类vue框架(一)

摘要：因为我希望这是一个系列的文章，所以开始之前先简单说一下，我几乎没用过这个框架写过项目，所以文章中难免会有一些比较外行的说法。先整理用法，然后再整理自己的框架。因为我希望这是一个系列的文章，所以开始之前先简单说一下，我几乎没用过vue这个框架写过项目，所以文章中难免会有一些比较外行的说法。当然，我用过一些时间的angular，也曾经解决过一些同行们vue方面的问题。所以如果有人原因看的...

raise_yang 2019-08-23 18:26 评论0 收藏0