如何实现幻灯片过渡效果？

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

Answer 1

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

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

一个例子：

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

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

我也建立了自己的jQuery滑块，你可以在这里找到它 。 进入源代码可能会为您提供更多信息，因为它会严重影响动画图像的位置和大小。

希望这可以帮助。

Answer 2

我两周前做过这件事。 我为fadeIn / fadeOut动画使用css3过渡。

演示： 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

 
 
 
Title 1
 
 
asd a dsa sda dsasda sdasd asd asda as dasdas dasd
 
 
 
 
Title 2
 
 
asd a dsa sda dsasda sdasd asd asda as dasdas dasd
 
 
  

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 = $('
'); // append crontral btns (function () { var i = len; var tmp = '
'; while (i) { i -= 1; tmp += '
' + i + '
'; } tmp += '
'; 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); }); });