随机制作一个简单的javascript幻灯片答案

【问题标题】：Make a simple javascript slideshow random随机制作一个简单的javascript幻灯片
【发布时间】：2017-03-24 19:11:14
【问题描述】：

HY，我正在使用一个非常简单的幻灯片 JS 脚本。

function slideSwitch() {
  var $active = $('#slideshow div.active');

  if ( $active.length == 0 ) $active = $('#slideshow div:last');

  var $next = $active.next().length ? $active.next()
  : $('#slideshow div:first');

  $active.addClass('last-active');

  $next.css({opacity: 0.0})
  .addClass('active')
  .animate({opacity: 1.0}, 1000, function() {
     $active.removeClass('active last-active');
  });
}

$(function() {
  setInterval( "slideSwitch()", 8000 );
});

但现在我想让它从随机幻灯片开始，而不是使用类 <div class="slide active"> 的预定义 div。据我所知，活动幻灯片用于让幻灯片工作，更改它会导致脚本失败？

如何实现这个功能？

HTML代码如下所示，不能使用php。

<div id="slideshow">
  <div class="slide active">
    <a href="link">
      <img src="/image.jpg" />
    </a>
  </div>
  <div class="slide">
    <a href="link">
      <img src="/image.jpg" />
    </a>
  </div>
  <div class="slide">
    <a href="">
      <img src="/image.jpg" />
    </a>
  </div>
</div>

【问题讨论】：

标签： javascript

【解决方案1】：

“就我能读懂的脚本而言，活动幻灯片是用来让幻灯片工作的，更改它会导致脚本失败吗？”

不，它是“故障安全”。如果没有active 幻灯片，它将使用最后一张幻灯片。

if ( $active.length == 0 ) $active = $('#slideshow div:last');

所以只需选择一张随机幻灯片并将active 类添加到其中。

可能的方式是……

从 DOM 中移除 active 类

添加此功能

function activateRandomSlide() {
    var slides = $("#slideshow .slide"),
        randomIndex = ~~(Math.rand() * slides.length);  // integer in range: 0..(slides.length - 1)

    slides.eq(randomIndex).addClass("active");
}

并在 DOMReady 上调用它

$(function() {
    activateRandomSlide();

    setInterval(slideSwitch, 8000 );
});

例子：

function activateRandomSlide() {
  var slides = $("#slideshow .slide"),
    randomIndex = ~~(Math.random() * slides.length); // integer in range: 0..(slides.length - 1)

  slides.eq(randomIndex).addClass("active");
}

$(function() {
  activateRandomSlide();
});

#slideshow {
  border: solid 1px black;
  padding: 20px;
}

.slide {
  width: 100%;
  text-align: center;
  display: none
}

.slide.active {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  <div class="slide">Slide 4</div>
  <div class="slide">Slide 5</div>
  <div class="slide">Slide 6</div>
  <div class="slide">Slide 7</div>
  <div class="slide">Slide 8</div>
  <div class="slide">Slide 9</div>
  <div class="slide">Slide 10</div>
</div>

【讨论】：