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

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

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

第一步 HTML

第二布 写CSS

第三步 写JS

第二布写CSS

第三步写JS