Question

我正在尝试制作图像滑块，用户可以在其中选择图像列表的图像。我有三个div，一个接一个地显示三个图像。 “图像中心”div保存所有图像，“图像左”和“图像右”应相应于实际选择的图像显示“图像中心”中存在的前一个和下一个图像DIV。中心div工作正常，但左右div不能正常工作。请帮帮我:)。

<div class="titles text-center">
    <h1>Válassz ki egy illusztrációs képet!</h1>    
    <h3>Lehetőleg szépet válasszál!</h3>
</div>

<div class="slider">

  <div class="image-container">

  <!-- Left Pic -->
  <div class="image-left">
  <img id="leftimg" src=""/>
    <a class="prev">&lang;</a>
  </div>

  <!-- Center Pic -->
  <div class="image-center">

  <!-- Images -->
  <ul>
    <li><img src="http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg" class="active"/></li>
    <li><img src="http://www.encyclopedia.com/sites/default/files/5/2799991.jpg" /></li>
    <li><img src="http://r.ddmcdn.com/s_f/o_1/cx_297/cy_0/cw_1201/ch_1201/w_720/APL/uploads/2014/08/wild-animal-safari-zebra-5371037.jpg" /></li>
    <li><img src="https://dingo.care2.com/pictures/causes/3215/3214061.large.jpg" /></li>
    <li><img src="https://upload.wikimedia.org/wikipedia/commons/7/7f/Equus_grevyi_1.jpg" /></li>
  </ul>

  <!-- Right Pic-->
  <div class="image-right">
  <img id="rightimg" src=""/>
    <a class="next">&rang;</a>
  </div>

  </div>

 </div>

Javascript：

  var slideIndex = 1;

  showSlides(slideIndex);

  function currentSlide(n){
    showSlides(slideIndex = n);
  }

  function moveSlide(n){    
    showSlides(slideIndex += n);
  }

function showSlides(n){
  var i; 
  var slides = $("ul li img");
  var slideInfo = $("#slide-info");
  var slidesLength = slides.length;
  var leftImage = $("#leftimg");
  var rightImage = $("#rightimg");

  if(n > slidesLength) {
    slideIndex = 1;
  }

  if(n < 1) {
    slideIndex = slides.length;
  } 

  for(i = 0; i < slidesLength; i++){
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";

  rightImage.attr("src",slides[slideIndex + 1].src);
  leftImage.attr("src",slides[slideIndex].src);
  }

Answer 1

您可以随时使用framework7.io，并提取您喜欢的内容。或者使用idangero.us/swiper。

如何显示与当前所选照片相关的下一张和上一张照片？

1 个答案: