js之相册预览效果

来源：互联网发布：淘宝卖家在哪里看流量编辑：程序博客网时间：2024/06/03 07:38

最近公司没有太多的项目，自己本身也是小白一枚，这几天就自己用js实现了一些小的功能，一方面想提高自己的js功底，一方面也希望给更多的小白们可以参考一下，一些大神们如果觉得有哪些不足的可以指点迷津哦，在此多谢喽。。。。

功能描述：

通过点击页面中的某张图片，会以弹框形式来查看当前大图，且大图之间可以来回切换，下方也会有对应的小图可反复点击查看大图和图片描述性的内容；

功能实现：

1. 页面上默认有几张小图片，点击某张图片可以打开模态框；
2. 模态框中的关闭按钮，用于关闭模态框；点击左右按钮可切换至相应页面的哟！！

代码实现：

<!DOCTYPE HTML><html><head>    <title>图片预览效果</title>    <meta charset=UTF-8 />    <style type="text/css">        body {            font-family:'Microsoft Yahei', Verdana, sans-serif;            margin: 0;        }        * {            box-sizing: border-box;        }        .row > .column {            padding: 0 8px;        }        .row:after {            content: "";            display: table;            clear: both;        }        .column {            float: left;            width: 25%;        }        /* 模态框-背景*/        .modal {            display: none;            position: fixed;            z-index: 1;            padding-top: 100px;            left: 0;            top: 0;            width: 100%;            height: 100%;            overflow: auto;            background-color: black;        }        /* 模态框-内容*/        .modal-content {            position: relative;            background-color: #fefefe;            margin: auto;            padding: 0;            width: 35%;            max-width: 1200px;        }        /* 模态框-关闭按钮 */        .close {            color: white;            position: absolute;            top: 10px;            right: 25px;            font-size: 35px;            font-weight: bold;        }        .close:hover,        .close:focus {            color: #999;            text-decoration: none;            cursor: pointer;        }        .mySlides {            display: none;        }        .cursor {            cursor: pointer        }        /* 模态框-上一张，下一张按钮 */        .prev, .next {            cursor: pointer;            position: absolute;            top: 50%;            width: auto;            padding: 16px;            margin-top: -50px;            color: white;            font-weight: bold;            font-size: 20px;            transition: 0.6s ease;            border-radius: 0 3px 3px 0;            user-select: none;            -webkit-user-select: none;        }        /* Position the "next button" to the right */        .next {            right: 0;            border-radius: 3px 0 0 3px;        }        /*按钮移上去透明度*/        .prev:hover, .next:hover {            background-color: rgba(0, 0, 0, 0.8);        }        /* 图片标签(1/4) */        .numbertext {            color: #D13076;            font-size: 16px;            padding: 8px 12px;            position: absolute;            top: 0;        }        img {            margin-bottom: -4px;        }        .caption-container {            text-align: center;            background-color: black;            padding: 2px 16px;            color: white;        }        .demo {            opacity: 0.6;        }        .active, .demo:hover {            opacity: 1;        }        img.hover-shadow {            transition: 0.3s        }        .hover-shadow:hover {            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)        }    </style>    <script type="text/javascript">        function openModal() {/*打开模态框*/            document.getElementById('myModal').style.display = "block";        }        function closeModal() {/*关闭模态框*/            document.getElementById('myModal').style.display = "none";        }        var slideIndex = 1;        showSlides(slideIndex);        function plusSlides(n) {            showSlides(slideIndex += n);        }        function currentSlide(n) {            showSlides(slideIndex = n);        }        function showSlides(n) {            var i;            var slides = document.getElementsByClassName("mySlides");            var dots = document.getElementsByClassName("demo");            var captionText = document.getElementById("caption");            if (n > slides.length) {slideIndex = 1}            if (n < 1) {slideIndex = slides.length}            for (i = 0; i < slides.length; i++) {                slides[i].style.display = "none";            }            for (i = 0; i < dots.length; i++) {                dots[i].className = dots[i].className.replace(" active", "");            }            slides[slideIndex-1].style.display = "block";            dots[slideIndex-1].className += " active";            captionText.innerHTML = dots[slideIndex-1].alt;        }    </script></head><body>    <h2 style="text-align:center">相册预览效果</h2>    <div class="row">        <div class="column">            <img src="img/161001103021068.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">        </div>        <div class="column">            <img src="img/161001103021259.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">        </div>        <div class="column">            <img src="img/161001103021447.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">        </div>        <div class="column">            <img src="img/161001103021639.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">        </div>    </div>    <div id="myModal" class="modal">        <span class="close cursor" onclick="closeModal()">×</span>        <div class="modal-content">            <!--大图-->            <div class="mySlides">                <div class="numbertext">1 / 4</div>                <img src="img/161001103021068.jpg" style="width:100%">            </div>            <div class="mySlides">                <div class="numbertext">2 / 4</div>                <img src="img/161001103021259.jpg" style="width:100%">            </div>            <div class="mySlides">                <div class="numbertext">3 / 4</div>                <img src="img/161001103021447.jpg" style="width:100%">            </div>            <div class="mySlides">                <div class="numbertext">4 / 4</div>                <img src="img/161001103021639.jpg" style="width:100%">            </div>            <!--上一张，下一张按钮-->            <a class="prev" onclick="plusSlides(-1)">❮</a>            <a class="next" onclick="plusSlides(1)">❯</a>            <div class="caption-container">                <p id="caption"></p>            </div>            <!--小图-->            <div class="column">                <img class="demo cursor" src="img/161001103021068.jpg" style="width:100%" onclick="currentSlide(1)" alt="2017流行色-Niagara,尼加拉蓝">            </div>            <div class="column">                <img class="demo cursor" src="img/161001103021259.jpg" style="width:100%" onclick="currentSlide(2)" alt="2017流行色-Primrose Yellow,樱草黄">            </div>            <div class="column">                <img class="demo cursor" src="img/161001103021447.jpg" style="width:100%" onclick="currentSlide(3)" alt="2017流行色-Lapis Blue,青金石蓝">            </div>            <div class="column">                <img class="demo cursor" src="img/161001103021639.jpg" style="width:100%" onclick="currentSlide(4)" alt="2017流行色-Flame,火焰红">            </div>        </div>    </div></body></html>

效果预览：

0 0