Question

HY，我正在使用一个非常简单的slidshow 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>

Answer 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>

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

1 个答案: