如何实现幻灯片过渡效果

how to implement slideshow transition effects?

本文关键字：幻灯片 过渡效果 实现 何实现      更新时间：2023-09-26

我认为在幻灯片中的过渡效果中，只有淡入和淡出两种动画方法可以使用，其他的都必须用css实现，对吗？如果没有，请举例说明，如果是，请指导我如何实施其中的一些，或者以前有人这样做过吗？

fadeIn()和fadeOut()是最容易使用的，但它们只是jquery动画函数的快捷方式。这些使用css，就像所有其他动画一样，包括自定义的，你不必直接处理它。

在jQuery中，您可以使用动画函数转换任何具有数值（高度、宽度、顶部、左侧等）的css值。对于更复杂的内置方法，您可以尝试jQuery UI库。

一个例子：

$('#myDiv').animate({height:30,width:300,top:400,left:300});

有关更多详细信息，请参阅jQuery animate文档。

我还构建了自己的jQuery滑块，您可以在这里找到它。进入源代码可能会给你更多的信息，因为它主要处理图像的位置和大小的动画。

希望这能有所帮助。

我两周前就做了。我使用css3转换fadeIn/fadeOut动画。

演示：http://www-stage.moztw.org/index2.shtml

触控笔

.slider
  position: relative
.slider-section
  position: absolute
  left: 0
  top: 0
  height: 100%
  width: 100%
  opacity: 0
  z-index: 0
  transition: opacity 2s ease
  &.show
    opacity: 1
    z-index: 1
.slider-section-title
  color: #FFF
  position: absolute
  left: 10px
  top: 10px
.slider-section-description
  position: absolute
  bottom: 0
  left: 0
  width: 100%
  padding: 5px 10px
  background: rgba(0, 0, 0, .7)
  color: #FFF
.slider-btn-group
  position: absolute
  z-index: 2
  width: 100%
  height: 10px
  bottom: 45px
  left: 0
  text-align: center
.slider-btn
  display: inline-block
  margin: 0 5px
  a
    display: inline-block
    width: 25px
    height: 10px
    background: rgba(0, 0, 0, .5)
    color: #FFF
    text-indent: 100%
    overflow: hidden
  &.current a
    background: rgba(0, 0, 0, .8)

HTML

<div class="slider key-point-slider">
    <section class="slider-section show" data-background="http://www.mozillabolivia.org/wp-content/uploads/2012/06/promo-beta.jpg">
        <h3 class="slider-section-title">Title 1</h3>
        <div class="slider-section-description">
            <p>asd a dsa sda dsasda sdasd asd asda as dasdas dasd</p>
        </div>
    </section>
    <section class="slider-section" data-background="http://www.mozillabolivia.org/wp-content/uploads/2012/06/promo-affiliates.jpg">
        <h3 class="slider-section-title">Title 2</h3>
        <div class="slider-section-description">
            <p>asd a dsa sda dsasda sdasd asd asda as dasdas dasd</p>
        </div>
    </section>
</div>

JavaScript

// load images
$('.slider-section').each(function () {
  var $this = $(this);
  $this.css('background-image', 'url("' + $this.data('background') + '")');
});
// init all sliders
$('.slider').each(function () {
  var $this = $(this);
  var $sections = $this.find('.slider-section');
  var len = $sections.length;
  var timer;
  var curr = 0;
  var btnGroup = $('<div class="slider-btn-group"></div>');
  // append crontral btns
  (function () {
    var i = len;
    var tmp = '<ul class="slider-btn-group-ul">';
    while (i) {
      i -= 1;
      tmp += '<li class="slider-btn"><a href="#">' + i + '</a></li>';
    }
    tmp += '</ul>';
    btnGroup.append(tmp);
  })();
  var $btns = btnGroup.find('.slider-btn a').on('click', function () {
    moveTo($(this).parent().index());
    return false;
  });
  $this.append(btnGroup);
  function moveTo(i) {
    curr = i;
    $sections
      .eq(i)
      .addClass('show')
      .siblings('.show')
      .removeClass('show');
    $btns
      .parent()
      .eq(i)
      .addClass('current')
      .siblings('.current')
      .removeClass('current');
  }
  moveTo(0);
  var next = (function next(i) {
    timer = setTimeout(function () {
      moveTo(i);
      next(i + 1 >= len ? 0 : i + 1);
    }, 5000);
    return next;
  })(1);
  $this.on('mouseenter', function () {
    timer && clearTimeout(timer);
  });
  $this.on('mouseleave', function () {
    next(curr);
  });
});
相关文章：