记录js小项目-Lightbox

最新推荐文章于 2024-06-25 11:18:39 发布

星辰落海

最新推荐文章于 2024-06-25 11:18:39 发布

阅读量158

点赞数

分类专栏：弹窗 js 文章标签： js css html

本文链接：https://blog.csdn.net/weixin_45596380/article/details/105940519

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

弹窗

2 篇文章 0 订阅

订阅专栏

效果图
1.首页面
在这里插入图片描述
2.点击图片弹出内容

3.点击箭头可左右切换，且下面小图跟随切换
4.点击×关闭
用来练手的小项目，不是很熟练，希望大佬多多指教！

下面贴上代码

<html>
<head>
    <meta charset="utf-8">
    <link href="../css/Lightbox.css" rel="stylesheet">
</head>
<body>
<h2 style="text-align: center">Lightbox</h2>
<div class="row">
    <div class="column">
        <img src="../image/car-1.jpg" style="width: 100%" class="img" slideIndex="1">
    </div>
    <div class="column">
        <img src="../image/car-2.jpg" style="width: 100%" class="img" slideIndex="2">
    </div>
    <div class="column">
        <img src="../image/car-3.jpg" style="width: 100%" class="img" slideIndex="3">
    </div>
    <div class="column">
        <img src="../image/car-4.jpg" style="width: 100%" class="img" slideIndex="4">
    </div>
    <div class="column">
        <img src="../image/car-5.jpg" style="width: 100%" class="img" slideIndex="5">
    </div>
</div>
<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <div class="modal-content">
        <div class="mySlides">
            <div class="numbertext">1/5</div>
            <img src="../image/car-1.jpg" style="width: 100%;">
        </div>
        <div class="mySlides">
            <div class="numbertext">2/5</div>
            <img src="../image/car-2.jpg" style="width: 100%;">
        </div>
        <div class="mySlides">
            <div class="numbertext">3/5</div>
            <img src="../image/car-3.jpg" style="width: 100%;">
        </div>
        <div class="mySlides">
            <div class="numbertext">4/5</div>
            <img src="../image/car-4.jpg" style="width: 100%;">
        </div>
        <div class="mySlides">
            <div class="numbertext">5/5</div>
            <img src="../image/car-5.jpg" style="width: 100%;">
        </div>
        <a href="javascript:void(0)" class="prev">&#10094;</a>
        <a href="javascript:void(0)" class="next">&#10095;</a>
        <div class="caption-container">
            <p id="caption"></p>
        </div>
        <div class="column">
            <img src="../image/car-1.jpg" class="demo " style="width: 100%" alt="享受速度" slideIndex="1">
        </div>
        <div class="column">
            <img src="../image/car-2.jpg" class="demo " style="width: 100%" alt="追求自我" slideIndex="2">
        </div>
        <div class="column">
            <img src="../image/car-3.jpg" class="demo " style="width: 100%" alt="风驰电掣" slideIndex="3">
        </div>
        <div class="column">
            <img src="../image/car-4.jpg" class="demo " style="width: 100%" alt="速度激情" slideIndex="4">
        </div>
        <div class="column">
            <img src="../image/car-5.jpg" class="demo " style="width: 100%" alt="自由自在" slideIndex="5">
        </div>

    </div>
</div>
<script src="../js/Lightbox.js">
    </script>
</body>
</html>

*{
    text-decoration: none;
    box-sizing: border-box;
}
body{
    margin: 0;
}
.column{
    float: left;
    width:20%;
    padding:0 8px;
}
.column img{
    cursor: pointer;
}
.column img:hover{
    -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) ;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) ;
}
.row:after{
    content: '';
    display: table;
    clear: both;
}
/*显示页面开始*/
.modal {
    z-index: 1;
    display:none;
    position: fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    padding-top: 100px;
    background: #000000;
    overflow: auto;
}
.modal-content{
    position: relative;
    padding:0;
    margin:auto;
    background-color: #fefefe;
    width: 90%;
    max-width: 1200px;
}
.modal .close{
    font-size: 35px;
    font-weight:bold;
    color: #ffffff;
    position: absolute;
    top:10px;
    right: 25px;
}
.close:hover{
    color: #999;
    text-decoration: none;
    cursor: pointer;
}
.mySlides {
    display:none;
}
.prev,.next{
    cursor: pointer;
    position: absolute;
    top:50%;
    margin-top: -50px;
    width: auto;
    padding: 16px;
    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;
}
.prev:hover,.next:hover{
    background: rgba(0, 0, 0, 0.8);
}
.numbertext{
    position: absolute;
    top: 20px;
    left:20px;
    font-size: 20px;
    color: #ffffff;
}
.caption-container {
    text-align: center;
    background-color: black;
    padding: 2px 16px;
    color: white;
}
.demo {
    opacity: 0.6;
}
.active{
    opacity:1;
}
.demo:hover {
    opacity: 1;
}
.modal-content .column{
    padding:0;
}
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)
}

window.onload=function () {
    var mySlides=document.getElementsByClassName("mySlides");
    var prev=document.getElementsByClassName("prev")[0];
    var next=document.getElementsByClassName("next")[0];
    var caption=document.getElementById("caption");
    var dots=document.getElementsByClassName("demo");
    var close=document.getElementsByClassName("close")[0];
    var myModal=document.getElementById("myModal");
    var img=document.getElementsByClassName("img");
    var slideIndex=1;
    for(var i=0;i<img.length;i++){
     img[i].onclick=function () {
         myModal.style.display="block";
         var myIndex=this.getAttribute("slideIndex");
         console.log(myIndex);
         slideIndex=myIndex;
         showSlides(slideIndex);
     }
    }

   close.onclick=function () {
           myModal.style.display="none";
    }

    showSlides(slideIndex);
    //切换函数
    function showSlides(n) {

    for(var i=0;i<mySlides.length;i++){
        mySlides[i].style.display="none";
    }

        for(var i=0;i<dots.length;i++){
            dots[i].className = dots[i].className.replace(" active", "");
        }
        dots[slideIndex-1].className += " active";
    mySlides[slideIndex-1].style.display="block";
    caption.innerHTML=dots[slideIndex-1].alt;
    }
    //箭头切换
    prev.onclick=function () {
        if(slideIndex>1){
            slideIndex--;
            showSlides(slideIndex);
        }else {
            slideIndex=5;
            showSlides(slideIndex);
        }
    }
    next.onclick=function () {
        if(slideIndex<5){
            slideIndex++;
            showSlides(slideIndex);
        }else {
          slideIndex=1;
            showSlides(slideIndex);
        }
    }
    //点击下方图片切换
   for(var i=0;i<dots.length;i++){
        dots[i].onclick=function () {
            var index=parseInt(this.getAttribute("slideIndex"));
            slideIndex=index;
            showSlides(slideIndex);
        }

   }

}

加油学习奥！

星辰落海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录js小项目-Lightbox

效果图1.首页面2.点击图片弹出内容3.点击箭头可左右切换，且下面小图跟随切换4.点击×关闭用来练手的小项目，不是很熟练，希望大佬多多指教！下面贴上代码<html><head> <meta charset="utf-8"> <link href="../css/Lightbox.css" rel="stylesheet"...
复制链接

扫一扫

专栏目录