个人中心
gpt4 book ai didi

模态窗口内的 JavaScript slider

转载 作者：行者123 更新时间：2023-11-28 05:35:32 25 4
gpt4 key购买 nike

我想在模态窗口中制作一个 slider 。我编写了代码的第一部分:单击每张图片后打开模态窗口。现在我在模态窗口中制作了两个按钮 previous 和 next，点击后我想转到下一张图像。而且我不明白我应该如何为上一个和下一个按钮编写js函数。我的代码如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="uff-8">
    <style>
    .myImg{
        cursor:pointer;
        transition:0.3s;
    }
    .myImg:hover{
        opacity:0.7;
    }
    .modal{
        display:none;
        position:fixed;
        z-index:1;
        padding-top: 100px;
        left:0;
        top:0;
        width:100%;
        height: 100%;
        overflow:auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.9);
    }
    .modal-content{
        margin: auto;
        display: block;
        width:80%;
        max-width: 700px;
    }
    .modal-content{
        -webkit-animation-name:zoom;
        -webkit-animation-duration: 0.6s;
        animation-name:zoom;
        animation-duraion:0.6s;
    }
    /* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 0;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
    @-webkit-keyframes zoom{
        from {-webkit-transform:scale(0)}
        to {-webkit-transform:scale(1)}
    }
    @keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
    }
    .close{
        position: absolute;
        top:15px;
        right:35px;
        color:#f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition:0.3s;
    }
    .close:hover, .close:focus{
        color:#bbb;
        text-decoration: none;
        cursor:pointer;
    }
    @media only screen and (max-width: 700px){
        .modal-content{
            width: 100%;
        }
    }


    </style>
</head>

<body>

<img class="myImg" src="/img1" width="300" height="150">
<img class="myImg" src="/img2" width="300" height="150">
<img class="myImg" src="/img3" width="300" height="150">
<div id="myModal" class="modal">
    <span class="close">X</span>
    <img class="modal-content" id="img01">
    <a class="prev">&#10094;</a>
    <a class="next">&#10095;</a>

</div>

<script>

    var modal = document.getElementById("myModal");
    var img = document.getElementsByTagName('img');
    var modalImg = document.getElementById('img01');
    var prev = document.getElementsByClassName('prev');
    var next = document.getElementsByClassName('next');
    var i;
    var currentImage;
    for(i = 0; i<img.length; i++){
        img[i].onclick = function(){
            modal.style.display = "block";
            modalImg.src = this.src;
            currentImage = this.img[i];
        }
    }

    prev.onclick = function(){
        modal.style.display = "block";
        modalImg.src = img.src;
    }

    var span = document.getElementsByClassName("close")[0];

    span.onclick = function() {
        modal.style.display = "none";
    }
</script>

</body>
</html>

最佳答案

基本上，我已将 data 属性添加到包含其索引的幻灯片图像，每当单击下一个或上一个时，我都会加载下一个或上一个索引图像..

查看下面的代码:

var modal = document.getElementById("myModal");
var img = document.getElementsByTagName('img');
var modalImg = document.getElementById('img01');
var currentImage;
for (var i = 0; i < img.length - 1; i++) {
  img[i].setAttribute('data', i);
  img[i].onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
    currentImage = this;
  }
}

document.getElementById('prev').onclick = function() {
  var count = parseInt(currentImage.getAttribute("data"));
  if (count > 0) currentImage = img[count - 1];
  modalImg.src = currentImage.src;
}

document.getElementById('next').onclick = function() {
  var count = parseInt(currentImage.getAttribute("data"));
  if (count < img.length - 2) currentImage = img[count + 1];
  modalImg.src = currentImage.src;
}

document.getElementsByClassName("close")[0].onclick = function() {
  modal.style.display = "none";
}
.myImg {
  cursor: pointer;
  transition: 0.3s;
}
.myImg:hover {
  opacity: 0.7;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
.modal-content {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duraion: 0.6s;
}
/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 0;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }
  to {
    -webkit-transform: scale(1)
  }
}
@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}
<img class="myImg" src="https://pixabay.com/static/uploads/photo/2012/02/19/17/36/duck-15026_960_720.jpg" width="300" height="150">
<img class="myImg" src="https://pixabay.com/static/uploads/photo/2013/09/22/16/56/duck-185014_960_720.jpg" width="300" height="150">
<img class="myImg" src="https://pixabay.com/static/uploads/photo/2015/01/07/10/32/mandarin-591333_960_720.jpg" width="300" height="150">
<div id="myModal" class="modal">
  <span class="close">X</span>
  <img class="modal-content" id="img01">
  <a id="prev" class="prev">&#10094;</a>
  <a id="next" class="next">&#10095;</a>
</div>

关于模态窗口内的 JavaScript slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38242958/

25 4 0
文章推荐： html - 如何水平居中元素？
文章推荐： ios - Swift - 在 segue 之后保存 ViewController 设置
文章推荐： javascript - 如何模拟背景大小 : cover on ?
文章推荐： ios - Kotlin - 按下按钮时运行打印语句
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com