如何隐藏第一张图片的左箭头和最后一张图片的右箭头

苏维克萨卡尔

在模态弹出窗口中,我需要隐藏第一张图像的左箭头,而左箭头对于两个中间幻灯片是可见的。并隐藏最后一张图像的右箭头,而左箭头在两个中间幻灯片中可见。基本上第一张图片只有右箭头,中间两张图片都有箭头,最后一张图片只有左箭头。请帮忙。请在整页中使用代码片段。

   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 = this.alt;
      }
.modal {
  width: 58%;
height: 100%;
top: 0;
position: fixed;
display: none;
background-color: rgba(22,22,22,0.5);
margin-left: 300px;
max-width: 779px;
min-width: 779px;
      }


      .modal-content {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
      }
      .mySlides {
        display: none;
      }


      .close {
position: relative;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
left: 584px;
top: 90px;
      }

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

      .mySlides {
        display: none;
      }

      .cursor {
        cursor: pointer;
      }
      .cursor {
        cursor: pointer;
      }
      .prev {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: -10%;
      }

      .next {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: 600px;
      }
<body>

                      <tr>
                        <div class="row">
                          <div class="column">
                            <td>
                            <p align="center"><img 

src="https://source.unsplash.com/collection/190727/1600x900" width="250" height="164" 

onclick="openModal();currentSlide(1)" class="hover-shadow cursor" ></p>
                            </td>
                          </div>
                          <div class="column">
                            <td>
                            <p align="center"><img 

src="https://source.unsplash.com/collection/190727/1600x910" width="250" height="164" 

onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
                            </td>
                          </div>
                      </tr>
   <tr>
                      <div class="column">
                        <td>
                          <p align="center"><img 

src="https://source.unsplash.com/collection/190727/1600x920" width="250" height="164"
                              onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
                        </td>
                        <td>
                      </div>
                      <div class="column">
                        <p align="center"><img 

src="https://source.unsplash.com/collection/190727/1600x930" width="250" height="164"
                            onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
              </td>
              </div>
            </tr>

        <div id="myModal" class="modal">
          <div class="modal-content">
            <span class="close cursor" onclick="closeModal()">&times;</span>

            <div class="mySlides">

              <img src="https://source.unsplash.com/collection/190727/1600x900" style="width: 

98%;
position: relative;
left: 10px;
top: 109px;">
              <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
            </div>

            <div class="mySlides">

              <img src="https://source.unsplash.com/collection/190727/1600x910" style="width: 

98%;
position: relative;
left: 10px;
top: 109px;">
              <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
            </div>
  <div class="mySlides">

            <img src="https://source.unsplash.com/collection/190727/1600x920" style="width: 

98%;
position: relative;
left: 10px;
top: 109px;">
            <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
          </div>

          <div class="mySlides">
            <img src="https://source.unsplash.com/collection/190727/1600x930" style="width: 

98%;
position: relative;
left: 10px;
top: 109px;">
            <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
          </div>
   <a class="prev" id="prev1" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>

尼古拉·帕维切维奇

您可以检查当前幻灯片是第一张还是最后一张。请看下面的代码片段:

let arrowPrev = document.querySelector(".prev");
let arrowNext = document.querySelector(".next");
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 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;
  }
  slideIndex === 1
    ? (arrowPrev.style.display = "none")
    : (arrowPrev.style.display = "block");
  slideIndex === slides.length
    ? (arrowNext.style.display = "none")
    : (arrowNext.style.display = "block");
  for (let 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 = this.alt;
}
.modal {
  width: 58%;
  height: 100%;
  top: 0;
  position: fixed;
  display: none;
  background-color: rgba(22, 22, 22, 0.5);
  margin-left: 300px;
  max-width: 779px;
  min-width: 779px;
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
.mySlides {
  display: none;
}

.close {
  position: relative;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  left: 584px;
  top: 90px;
}

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

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}
.cursor {
  cursor: pointer;
}
.prev {
  cursor: pointer;
  position: relative;
  top: -149px;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  left: -10%;
}

.next {
  cursor: pointer;
  position: relative;
  top: -149px;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  left: 600px;
}
<body>

  <tr>
    <div class="row">
      <div class="column">
        <td>
          <p align="center"><img src="https://source.unsplash.com/collection/190727/1600x900" width="250" height="164"
              onclick="openModal();currentSlide(1)" class="hover-shadow cursor"></p>
        </td>
      </div>
      <div class="column">
        <td>
          <p align="center"><img src="https://source.unsplash.com/collection/190727/1600x910" width="250" height="164"
              onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
        </td>
      </div>
  </tr>
  <tr>
    <div class="column">
      <td>
        <p align="center"><img src="https://source.unsplash.com/collection/190727/1600x920" width="250" height="164"
            onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
      </td>
      <td>
    </div>
    <div class="column">
      <p align="center"><img src="https://source.unsplash.com/collection/190727/1600x930" width="250" height="164"
          onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
        </td>
    </div>
  </tr>

  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close cursor" onclick="closeModal()">&times;</span>

      <div class="mySlides">

        <img src="https://source.unsplash.com/collection/190727/1600x900" style="width: 
98%;
position: relative;
left: 10px;
top: 109px;">
        <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
      </div>

      <div class="mySlides">

        <img src="https://source.unsplash.com/collection/190727/1600x910" style="width: 
98%;
position: relative;
left: 10px;
top: 109px;">
        <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
      </div>
      <div class="mySlides">

        <img src="https://source.unsplash.com/collection/190727/1600x920" style="width: 
98%;
position: relative;
left: 10px;
top: 109px;">
        <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
      </div>

      <div class="mySlides">
        <img src="https://source.unsplash.com/collection/190727/1600x930" style="width: 
98%;
position: relative;
left: 10px;
top: 109px;">
        <p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
      </div>
      <a class="prev" id="prev1" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>


      <script src="ind.js"></script>
</body>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Javascript代码将最后一张图片移动到多张图片之间的第一张图片

在Jekyll中,我如何获取帖子的第一张图片?

featherlight.js在图库中单击的第一张图片没有导航箭头

如何检测圆滑的最后一张幻灯片和第一张幻灯片?

为什么display flex连续隐藏第一张图片?

离开图片后,如何重置html图片库以第一张图片开头?

获取每个产品的第一张图片

在Swift中建立个人资料图片的圆形图片集:如何将最后一张照片隐藏在第一张照片下?

如果上传了第二张图片,则第一张图片将被删除,第二张图片将取代此第一张图片,如何在本机中实现

PHP从多个来源加载第一张图片

如何删除第一张和最后一张图像的左右空间?

使用新的DOMDocument()获取第一张图片

图片库将第一张图片放大

jQuery:在第一张图片/第一张图片的div之后插入div

显示第一张图片,不显示其他图片

如何仅从迭代中检索第一张图片?

Image_tag第一张图片

Wordpress - 在第一张图片后显示代码

隐藏/禁用最后一张幻灯片上的“下一张”按钮和第一张幻灯片上的“上一张”按钮

第一张图片显示弹出窗口,而不是其他图片

从提要内容中删除第一张图片

用户在删除第一张图片之前上传第二张图片

如何显示产品的第二张图片和最后一张图片?PrestaShop

Angular 删除第一张图片

在导航中成为第一张图片

如何找到文件夹中的第一张图片?

我正在尝试从与 id 相关的表中获取第一张图片,但不幸的是获取所有图片而不是第一张图片

多张图片,无法从数组中获取第一张图片

延迟加载只加载第一张图片