javascript - 向 slider 添加元素符号，该元素符号会随右侧幻灯片自动更改

Question

我制作了一个带有七张图片以及下一个和上一个按钮的 slider 。 slider 自动工作，悬停 slider 时循环停止。

我尝试添加交互式元素符号 - 现在用静态 HTML 编写 - 来响应给定的图片。
元素符号应该与幻灯片一样多，但无需自己逐一添加。
但我不知道该怎么做。有人可以帮忙吗？

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("dot");
  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", "");
  }

  if (slides.length > 0) { 
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
  }
}

$(document).ready(function() {
  var interval = setInterval(function() {
    var $curr = $('.mySlides:visible'), 
        $next = ($curr.next().length) ? $curr.next() : $('.mySlides').first();
    $next.css('z-index',2).fadeIn('slow', function() {
      $curr.hide().css('z-index',0);
      $next.css('z-index',1);
    });
  }, 5000);
  
  $('.mySlides').hover(function() {
    clearInterval(interval);
  }, function() {
    interval = setInterval(function() {
      var $curr = $('.mySlides:visible'), 
          $next = ($curr.next().length) ? $curr.next() : $('.mySlides').first();
      $next.css('z-index',2).fadeIn('slow', function() {
        $curr.hide().css('z-index',0);
        $next.css('z-index',1);
      });
    }, 5000);
  });
});

/* SLIDER*/
#containermio {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  height: 536px;
  position: relative;
}

#containermio a:hover {
  color: white;
}

#containermio ul {
  margin: 0px;
  padding: 0px;
  width: 100%;
  list-style: none;
  height: 100%;
  position: absolute;
}

#containermio ul li {
  height: 100%;
  display: none;
  position: relative;
}

#containermio ul li:first-child {
  display: block;
}

#containermio ul li img {
  width: 100%;
  min-height: 100%;
}

/* FADE */
.mySlides {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* SLIDE TITLE*/
.text {
  margin: 0;
  padding: 20px 0 0 25px;
  font-size: 40px;
  font-weight: 600;
  color: #f7f7f7;
  text-align: center;
  position: absolute;
  font-family: 'Montserrat', sans-serif;
}

/* ARROWS */
.prev, .next {
  z-index: 99;
  cursor: pointer;
  position: absolute;
  display: block;
  top: 40%;
  width: auto;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  padding: 25px 25px 25px 25px;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  text-decoration: none;
}

/* DOTS */
.dotdiv {
  bottom: 10px;
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 99;
}

.dot {
  cursor:pointer;
  height: 6px;
  width: 6px;
  margin: 0 2px;
  background-color: #eee;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  z-index: 99;
}

.active, .dot:hover {
  background-color: #717171;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="containermio">
  <ul id="slidermio">
    <li class="mySlides">
      <div id="slide1" class="text">alicè</div>
      <img src="http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg"/>
    </li>
    <li class="mySlides">
      <div id="slide2" class="text">halo halo</div>
      <img src="http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg"/>
    </li>
    <li class="mySlides">
      <div id="slide3" class="text">tilt</div>
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png"/>
    </li>
    <li class="mySlides">
      <div id="slide4" class="text">artist unknown</div>
      <img src="http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg"/>
    </li>
    <li class="mySlides">
      <div id="slide5" class="text">insa</div>
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png"/>
    </li>
    <li class="mySlides">
      <div id="slide6" class="text">blue lights</div>
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
    </li>
    <li class="mySlides">
      <div id="slide7" class="text">outdoor festival</div>
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
    </li>
  </ul>
  
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
  
  <div class="dotdiv">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(+1)"></span>
    <span class="dot" onclick="currentSlide(+1)"></span>
    <span class="dot" onclick="currentSlide(+1)"></span>
    <span class="dot" onclick="currentSlide(+1)"></span>
    <span class="dot" onclick="currentSlide(+1)"></span>
    <span class="dot" onclick="currentSlide(+1)"></span>
  </div>
</div>

jsfiddle:https://jsfiddle.net/e9m3yupp/   (原始: https://jsfiddle.net/hctxgqhx/ )

Answer 1

我对您的代码进行了很多更改，以使其更加灵活和简洁。
有太多的更改无法解释每一个，因此我在下面的代码片段中使用了注释来解释每一行的作用。

但我会总结一下最重要的变化:

• 我将所有幻灯片放在一个数组中。在该数组中，每张幻灯片都由一个包含 txt 的对象表示。和一个img属性(property)。数组的第一个索引 ( [0] ) 用于存储幻灯片索引。
  我删除了<ul>与所有<li>从 HTML 中删除 s，并将其替换为 <div> 。我没有切换元素，而是更改图像的来源。
  这样，您就不必向 HTML 添加新的幻灯片，您所要做的就是向 JS 中的幻灯片数组添加一个幻灯片对象。
• 我移动了onclick从 HTML 到 JS 的处理程序(用于箭头和元素符号/点)。将所有 JS 代码保留在 HTML 之外被认为是一种很好的做法。
• 不要过多关注 CSS 中的所有“更改”。大多数情况下，这些只是我为了自己的可读性而重新排序和重新格式化的内容，但我承认这是一种后天的品味:)
  但是，可能有一些对于正确布局/功能至关重要的实际更改，但正如我所说，我更改了太多，以至于我什至不记得了。

不幸的是，我无法获取 CSS fade动画(请参阅下面的代码块)以使用新代码。因为现在所有幻灯片只有一个元素，所以切换源而不是元素，动画不再触发。我尝试了很多方法，但都没有成功。

/* FADE */
.slide {-webkit-animation-name:fade; -webkit-animation-duration:1.5s; animation-name:fade; animation-duration:1.5s;}
@-webkit-keyframes fade {from {opacity:.4} to {opacity:1}}
@keyframes fade {from {opacity:.4} to {opacity:1}}

所以我必须使用 jQuery 将该动画移至 JS:

$(".slide").fadeTo(0,.4,function(){$(this).fadeTo(1500,1);});

如果您确实想使用 CSS 制作动画，您可以使用与我用于创建元素符号/点 类似的代码(请参阅代码片段)，同时创建 <li>对于阵列中的每张幻灯片。但是，您添加的幻灯片越多，您的网页就会被大量元素挤满……不确定哪个选项更好。

<小时/>

代码片段:

$(document).ready(function() {
  var interval;
  var slides = [
    1,
    {txt:"alicè", img:"http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg"},
    {txt:"halo halo", img:"http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg"},
    {txt:"tilt", img:"http://kenwheeler.github.io/slick/img/fonz1.png"},
    {txt:"artist unknown", img:"http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg"},
    {txt:"insa", img:"http://kenwheeler.github.io/slick/img/fonz2.png"},
    {txt:"blue lights", img:"http://kenwheeler.github.io/slick/img/fonz3.png"},
    {txt:"outdoor festival", img:"http://kenwheeler.github.io/slick/img/fonz3.png"}
  ];
  
  /* SLIDE INTERVAL*/
  function startSlideInterval(){interval = setInterval(function(){$(".next").click();},5000);} //trigger the next-button on every interval
  $('.slide').hover(function(){clearInterval(interval);},startSlideInterval); //clear interval on 'hover', restart interval on 'unhover'
  
  /* SHOW SLIDE */
  function showSlide(n) {
    if (n>slides.length-1) {n=1;} else if (n<1) {n=slides.length-1;} //loop around to first/last slide
    $(".slide img").attr("src",slides[n].img); //change image
    $(".slide div").html(slides[n].txt); //change text
    $(".bullets span:nth-child("+slides[0]+")").removeClass("active"); //deactivate old bullet
    $(".bullets span:nth-child("+n+")").addClass("active"); //activate new bullet
    $(".slide").fadeTo(0,.4,function(){$(this).fadeTo(1500,1);}); //fade new slide
    slides[0] = n; //set slide-index to new value
  }
  
  /* ARROWS */
  $(".prev").click(function(){showSlide(slides[0]-1);}); //click-handler
  $(".next").click(function(){showSlide(slides[0]+1);}); //click-handler
  
  /* BULLETS */
  (function(){
    var bullets = "";
    for (var i=1,count=slides.length; i<count; ++i) {bullets += "<span></span>"} //add a bullet for every slide in the array
    $(".bullets").append(bullets); //append bullets to their container
    $(".bullets span").click(function(){showSlide($(this).index()+1);}); //click-handler
  })();
  
  /* INITIALIZE */
  showSlide(slides[0]); //show the first slide
  startSlideInterval(); //start slide-interval
});

html {width:95%; height:90%;} /*ONLY FOR CODE SNIPPET*/
body {width:100%; height:100%;}

/* SLIDER */
#slider {position:relative; width:90%; height:80%; margin:0 auto; background-color:grey; overflow:hidden;}
#slider .slide {width:100%; height:100%; text-align:center;}
#slider .slide img {width:auto; height:100%;}
#slider .slide div {position:absolute; left:0; top:0; margin:0; padding:20px 0 0 25px; text-align:center; font-family:'Montserrat',sans-serif; font-size:40px; font-weight:600; color:#f7f7f7;}

/* ARROWS */
#slider a {
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: auto;
  padding: 25px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  z-index: 1;
  transition: background-color 0.6s ease;
}
#slider a:hover {background-color:rgba(0,0,0,0.8);}
#slider a.prev {left:0; border-radius:0 3px 3px 0;}
#slider a.next {right:0; border-radius:3px 0 0 3px;}

/* BULLETS */
.bullets {position:absolute; bottom:10px; width:100%; text-align:center; z-index:1;}
.bullets span {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 2px;
  border-radius: 50%;
  background-color: #eee;
  cursor:pointer;
  transition: background-color 0.6s ease;
}
.bullets span:hover, .bullets span.active {background-color:#717171;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="slider">
  <div class="slide"><img src="" /><div></div></div>
  <a class="prev">&#10094;</a><a class="next">&#10095;</a>
  <div class="bullets"></div>
</div>

jsfiddle:https://jsfiddle.net/hctxgqhx/16/