web從零單排，做一個簡單的幻燈片

SexySix 發布于2019-08-21 11:56 / 1643人閱讀

我的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服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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