js之相册预览效果

最新推荐文章于 2024-07-15 15:07:58 发布

珍妮的小罐君

最新推荐文章于 2024-07-15 15:07:58 发布

阅读量1.7k

点赞数 3

分类专栏： WEB HTML CSS 功能实现小集锦 JavaScript 文章标签：模态框弹框对话框相册预览图片切换

本文链接：https://blog.csdn.net/qq_36671474/article/details/55505328

版权

JavaScript 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

WEB

20 篇文章 1 订阅

订阅专栏

CSS

19 篇文章 1 订阅

订阅专栏

最近公司没有太多的项目，自己本身也是小白一枚，这几天就自己用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%" οnclick="openModal();currentSlide(1)" class="hover-shadow cursor">
        </div>
        <div class="column">
            <img src="img/161001103021259.jpg" style="width:100%" οnclick="openModal();currentSlide(2)" class="hover-shadow cursor">
        </div>
        <div class="column">
            <img src="img/161001103021447.jpg" style="width:100%" οnclick="openModal();currentSlide(3)" class="hover-shadow cursor">
        </div>
        <div class="column">
            <img src="img/161001103021639.jpg" style="width:100%" οnclick="openModal();currentSlide(4)" class="hover-shadow cursor">
        </div>
    </div>

    <div id="myModal" class="modal">
        <span class="close cursor" οnclick="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" οnclick="plusSlides(-1)">❮</a>
            <a class="next" οnclick="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%" οnclick="currentSlide(1)" alt="2017流行色-Niagara,尼加拉蓝">
            </div>
            <div class="column">
                <img class="demo cursor" src="img/161001103021259.jpg" style="width:100%" οnclick="currentSlide(2)" alt="2017流行色-Primrose Yellow,樱草黄">
            </div>
            <div class="column">
                <img class="demo cursor" src="img/161001103021447.jpg" style="width:100%" οnclick="currentSlide(3)" alt="2017流行色-Lapis Blue,青金石蓝">
            </div>
            <div class="column">
                <img class="demo cursor" src="img/161001103021639.jpg" style="width:100%" οnclick="currentSlide(4)" alt="2017流行色-Flame,火焰红">
            </div>
        </div>
    </div>
</body>
</html>

效果预览：