1. 编程号首页

JS特效三：LightBox（轮播图+图片弹窗）

编程小号 • • 未分类

JS特效三：LightBox（轮播图+图片弹窗）今天的特效是一个很常用的图片查看。结合了轮播图和图片弹窗，所以这两个没有理解的，还是先去看看。然后再来理解这个哦！首先我们看下效果：首先是查看图片的初始网页（注意图片hover的时候有阴影）这是点进去图片进入的图片查看，然后还有轮播图效果！最后就是按钮的hover效果其中要说明的就是上一张和下一张的这个属性：user-select:none;这个是防止用户在复制的时候复制走这个符号！然后就是js代码比之前两个多一点，不过认真理解还是很简单的，希望大家多思考，多练习。详细的.

在这里插入图片描述

今天的特效是一个很常用的图片查看。结合了轮播图和图片弹窗，所以这两个没有理解的，还是先去看看。然后再来理解这个哦！

首先我们看下效果：

  • 首先是查看图片的初始网页（注意图片hover的时候有阴影）

请添加图片描述

  • 这是点进去图片进入的图片查看，然后还有轮播图效果！

请添加图片描述

  • 最后就是按钮的hover效果

在这里插入图片描述

其中要说明的就是上一张和下一张的这个属性：user-select: none;

这个是防止用户在复制的时候复制走这个符号！然后就是js代码比之前两个多一点，不过认真理解还是很简单的，希望大家多思考，多练习。

详细的思路参考前面两个特效，这个只不过是把两个结合在一起了！源码中有详细的注释

附上源码：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LightBox</title>
    <link rel="stylesheet" href="1.css">
</head>

<body>

    <h2 style="text-align:center; margin: 2rem 0 4rem 0;">LightBox</h2>

    <!-- 默认图片查看 -->

    <div class="row">
        <div class="column">
            <img src="img/1.jpg" style="width:100%;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
        </div>
        <div class="column">
            <img src="img/2.jpg" style="width:100%;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
        </div>
        <div class="column">
            <img src="img/3.jpg" style="width:100%;" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
        </div>
        <div class="column">
            <img src="img/4.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()">&times;</span>
        <div class="modal-content">

            <div class="mySlides">
                <div class="numbertext">1 / 4</div>
                <img src="img/1.jpg" style="width:100%">
            </div>

            <div class="mySlides">
                <div class="numbertext">2 / 4</div>
                <img src="img/2.jpg" style="width:100%">
            </div>

            <div class="mySlides">
                <div class="numbertext">3 / 4</div>
                <img src="img/3.jpg" style="width:100%">
            </div>

            <div class="mySlides">
                <div class="numbertext">4 / 4</div>
                <img src="img/4.jpg" style="width:100%">
            </div>

            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>

            <div class="caption-container">
                <p id="caption"></p>
            </div>


            <div class="column">
                <img class="demo cursor" src="img/1.jpg" style="width:100%" onclick="currentSlide(1)" alt="rabbit">
            </div>
            <div class="column">
                <img class="demo cursor" src="img/2.jpg" style="width:100%" onclick="currentSlide(2)" alt="dog">
            </div>
            <div class="column">
                <img class="demo cursor" src="img/3.jpg" style="width:100%" onclick="currentSlide(3)" alt="cat">
            </div>
            <div class="column">
                <img class="demo cursor" src="img/4.jpg" style="width:100%" onclick="currentSlide(4)" alt="squirrel">
            </div>
        </div>
    </div>
    <script src="1.js"></script>
</body>

</html>



body { 
   
    font-family: 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的背景设置 */

.modal { 
   
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #111;
}


/* Modal的内容区*/

.modal-content { 
   
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 90%;
    max-width: 1200px;
}


/* 关闭的按钮 */

.close { 
   
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
}


/* 按钮的hover效果和focus效果 */

.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;
}


/*设置“下一个”的按钮的位于右边 */

.next { 
   
    right: 0;
    border-radius: 3px 0 0 3px;
}


/* hover效果的背景颜色变化 */

.prev:hover, .next:hover { 
   
    background-color: rgba(0, 0, 0, 0.8);
}


/* 图片左上角数字的设置 */

.numbertext { 
   
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

img { 
   
    margin-bottom: -4px;
}


/* 设置图片alt文字的样式 */

.caption-container { 
   
    text-align: center;
    background-color: #111;
    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)
}




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);
}


// js的方法可以先调用再声明
function showSlides(n) { 
   
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    var captionText = document.getElementById("caption");
    // 一共四张图片，index大于4的时候，下一个图片的index为1
    if (n > slides.length) { 
    slideIndex = 1 }
    // 当第一张图片的下一张就是“1-1<0”，所以下一张的index为4
    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;
    captionText.style.fontSize = "1rem";
}

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/35803.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注