向使用右侧幻灯片

Question

我制作了一张带有七张照片和下一张和前一张按钮的滑块。滑块自动工作，当悬停滑块时，循环停止。

我试图添加交互式项目符号 - 现在用静态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属性的对象表示。数组的第一个索引（[0]）用于存储幻灯片索引 我从HTML中删除了所有<ul>的{​​{1}}，并将其替换为一个<li>。而不是切换元素，我改变了图像的来源 这样，您不必向HTML中添加新幻灯片，您只需将幻灯片对象添加到JS中的slides-array。
• 我将<div>处理程序（用于箭头和项目符号/点）从HTML移动到JS。将所有JS代码保留在HTML之外是一种良好的做法。
• 不要过分关注CSS中的所有“更改”。大多数情况下，这些只是我为了自己的可读性而重新排序和重新格式化的东西，但我承认这是一种后天的品味:) 然而，可能会有一些实际的更改对于正确的布局/功能至关重要，但就像我说的那样，我改变了很多，甚至不记得了。

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

fade

所以我不得不使用 jQuery ：

将动画移动到JS

/* 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}}

如果你真的想用CSS做动画，可以使用与我用来创建项目符号/点数相似的代码（参见代码片段），同时创建一个$(".slide").fadeTo(0,.4,function(){$(this).fadeTo(1500,1);}); 对于阵列中的每个幻灯片。但是，如果您添加的幻灯片越多，那么您的网页会占用大量元素...不确定哪个选项更好。

代码段：

<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;}

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