个人中心
gpt4 book ai didi

HTML 中的 Javascript 问题(弹出式画廊)

转载 作者：太空宇宙 更新时间：2023-11-04 02:25:09 24 4
gpt4 key购买 nike

在下面的代码中，当我点击两张图片中的一张时，它会打开一个画廊，如果我点击另一张，它应该会打开一个不同的画廊。它有效，但不像我预期的那样，因为正如您在代码片段中看到的那样，每个画廊中都有一些空幻灯片。你能帮我解决这个问题吗？谢谢!

// Get the image and insert it inside the modal
function imgg(id){
    var modal = document.getElementById(id);
		var modalImg = document.getElementById('mySlides');
    modal.style.display = "block";
    modalImg.src = this.src;
}

// When the user clicks on <span> (x), close the modal
   function clos(id) { 
    var modal = document.getElementById(id);
    modal.style.display = "none";
}

// Sliseshow
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length} ;
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";  
}
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.mySlides {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
box-shadow: 0px 0px 50px -6px #000;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 100px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .mySlides {
        width: 100%;
    }
}

.w3-btn-floating {
  
}
<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="test.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">


</head>
<body>

<img id="myImg" onClick="imgg('myModal')" src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" alt="" width="300" height="200">

<img id="myImg" onClick="imgg('myModal1')"src="http://cue.me/kohana/media/frontend/js/full-page-scroll/examples/imgs/bg2.jpg" alt="" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span onclick="clos('myModal')" class="close">×</span>
	<img class="mySlides" id="img_modal" src="http://cue.me/kohana/media/frontend/js/full-page-scroll/examples/imgs/bg2.jpg" >
	<img class="mySlides" id="img_modal" src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg" >

	<a class="w3-btn-floating" style="position:absolute;top:45%;left:280px;" onclick="plusDivs(-1)">&#10094;</a>
	<a class="w3-btn-floating" style="position:absolute;top:45%;right:280px;" onclick="plusDivs(1)">&#10095;</a>
</div>

<div id="myModal1" class="modal">
  <span onclick="clos('myModal1')" class="close">×</span>
	<img class="mySlides" id="img_modal" src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" >
	<img class="mySlides" id="img_modal" src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg" >

	<a class="w3-btn-floating" style="position:absolute;top:45%;left:280px;" onclick="plusDivs(-1)">&#10094;</a>
	<a class="w3-btn-floating" style="position:absolute;top:45%;right:280px;" onclick="plusDivs(1)">&#10095;</a>
</div>
</body>
</html>

最佳答案

我不是 100% 确定，但是这一行

var x = document.getElementsByClassName("mySlides");

应该返回 4 个元素。这可以解释为什么您的 slider 中有 2 张空幻灯片。尝试先按 id(例如“myModal”或“myModal1”)进行过滤，然后获取包含的“mySlides”类的数量。

所以你可以这样做:

var activeModalId = "";
// Get the image and insert it inside the modal
function imgg(id){
    activeModalId = id;
    var modal = document.getElementById(activeModalId);
    var modalImg = modal.getElementsByClassName('mySlides');
    modal.style.display = "block";
    showDivs(0);
}

// When the user clicks on <span> (x), close the modal
function clos() { 
    var modal = document.getElementById(activeModalId);
    modal.style.display = "none";
    activeModalId = "";
}

// Sliseshow
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementById(activeModalId).getElementsByClassName("mySlides");
    if (n > x.length) {slideIndex = 1;}
    if (n < 1) {slideIndex = x.length;}
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex-1].style.display = "block";  
}

在顶部，您声明您的事件模式。它将由您的函数设置、重用和删除。

关于HTML 中的 Javascript 问题(弹出式画廊)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37455052/

24 4 0
文章推荐： c - 在 O(n) 运行时间内对数组元素求平方
文章推荐： Python Django 从 DateField 按月获取不同的查询集
文章推荐： c - #在c中定义数组格式
文章推荐： javascript - 移动响应菜单 - 如果出现子菜单(显示链接)
太空宇宙
个人简介

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

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