具有随机效果的图像滑块

时间:2018-09-12 18:01:26

标签: javascript jquery html

我想随机地影响滑块的任何图像,但是两个连续的图像都不会同时获得相同的效果。我该怎么办?

$(window).load(function() {
  $('#slider').nivoSlider();
});
$('#slider').nivoSlider({
  effect: 'random',
  slices: 4,
  boxCols: 8,
  boxRows: 4,
  startSlide: 0,
  manualAdvance: false,
  randomStart: false,
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/nivo-slider.css" />

<div id="wrapper">
  <div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
      <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" data-thumb="images/toystory.jpg" alt="" />
      <a href="http://dev7studios.com"><img src="http://wowslider.com/sliders/demo-81/data1/images/redkite50498.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
      <img src="http://ec.europa.eu/research/headlines/news/images/11_12_17_small.jpg" data-thumb="images/walle.jpg" alt="" />
      <img src="https://secure.i.telegraph.co.uk/multimedia/archive/03597/POTD_chick_3597497k.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
    </div>
    <div id="htmlcaption" class="nivo-html-caption">
      <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
    </div>
  </div>
</div>
<div id="wrapper">
  <div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
  </div>
</div>
</div>

1 个答案:

答案 0 :(得分:1)

documentation中,可以使用以下动画:

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • 折叠
  • 淡出
  • 随机
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

您可以使用0为每个过渡设置动画,如here所示。考虑到所有这些,您可以覆盖I函数来为data-transition属性设置新值,但上面列出的动画名称不包括当前显示的幻灯片所引用的动画名称。 / p>