Question

我在我的网站上使用图片幻灯片我想添加转换到滑块任何人帮我请... 滑块与此处显示的相同： http://yellowandred.in/PGP%20Enterprise/index.php

Answer 1

您的HTML代码：

<!-- styling the height and width is important for some transitions -->
<div id="slideshow" style="width: 400px; height: 200px">
  <img src="../img/one.jpg"> <!-- can use any element you want, not just images -->
  <img src="../img/two.jpg">
  <img src="../img/three.jpg">
  <img src="../img/four.jpg">
  <img src="../img/five.jpg">
</div>

您的Java脚本：

var $el = $('#slideshow');
$el.slideshow({
  duration: 400,
  delay: 3000,
  selector: '> img',
  transition: 'push(up)',
  autoPlay: true,
  show: function (params){
    var nextIndex = params.next.index;
    if (nextIndex > 2) {
      // do something awesome when the slide is after the third slide.
    }
  },
  complete: function (params){
    // do something awesome when a transition finishes
  }
});

// get the slideshow object if you want it
var slideshow = $el.data('slideshow');

// show the third slide
$el.slideshow( 'show', 2 ); // Element API
slideshow.show(2); // object API

// show the next slide
slideshow.show('next');

// pause and play
slideshow.stop();
slideshow.play();

自定义转换：

jQuery.rf.slideshow.defineTransition('slide', function (params, dir, ease){
  var animation = {},
      prop = (dir == 'left' || dir == 'right') ? 'left' : 'top';
  animation[prop] = (dir == 'left' || dir == 'up') ? '-100%' : '100%';
  params.previous.animate(animation, params.duration, ease);
});

你也可以创建自己的过渡;）

如何为幻灯片添加转场？

1 个答案: