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

時間 2019-12-20

標籤 web 單排一個簡單幻燈片欄目 HTML 简体版

原文原文鏈接

個人First Blood。
學習javascript愈來愈吃力，之前須要實現什麼功能，各類插件上，照着例子，直接複製粘貼，也不知道啥原理，如今後悔了，人總要爲本身作過的一切買單，這麼作是好事也是壞事，廢話很少說，本身體會哈！javascript

第一步 HTML

<body>
    <div class="main">
        <div class="slideshow-container">
            <div class="slide fadeIn">
                <img src="../img/1.jpg" />
            </div>
            <div class="slide fadeIn">
                <img src="../img/2.jpg" />
            </div>
            <div class="slide fadeIn">
                <img src="../img/3.jpg" />
            </div>
            <div class="slide fadeIn">
                <img src="../img/4.jpg" />
            </div>

            <a class="prev" onclick="prevSlide()">&#10094;</a>
            <a class="next" onclick="nextSlide()">&#10095;</a>
        </div>
        <br/>
        <div style="text-align:center">
            <span class="dot active" onclick="goSlide(1)" title="1"></span>
            <span class="dot" title="2" onclick="goSlide(2)"></span>
            <span class="dot" title="3" onclick="goSlide(3)"></span>
            <span class="dot" title="4" onclick="goSlide(4)"></span>
        </div>
    </div>
</body>

心路歷程
先搞個盒子，把這些幻燈片的圖片裝起來，還要有左右滑動箭頭，還有啥，就是切換的點點
接下來要搞樣式了，想一想咱們通常剛打開一個幻燈片是什麼樣子，先寫出來樣式java

第二布寫CSS

<style>
    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;
        }
    }
</style>

心路歷程
表示首先要清除樣式，而後開始。細說不來啊，中間加了個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那這個就很簡單了，因此最後別忘了賦新的值給slideIndexweb