This document discusses slideshow implementations using JavaScript and CSS3. It covers HTML structure, utilities like automatic playback and image lazy loading, different transition effects like fade and slide, design patterns like adapter and factory, and extending the switchable component. It also mentions alternatives using CSS3 transitions directly and addresses past memory leak issues in YUI.

1. Slideshow
虎牙
2011/06/21
2011/6/21

2. http://docs.kissyui.com/kissy/src/switchable/demo.html
2011/6/21

3. 2011/6/21

4. HTML Structure
<!-- Container -->
<div id="J_slideshow">
<!-- Panels -->
<ul class="yui3-slideshow-panelcon">
<li class="yui3-slideshow-panel yui3-slideshow-selected">
<img src="http://img02.taobaocdn.com/tps/i2/T1Gk8nXaJkXXXXXXXX-505-320.jpg" />
</li>
<li class="yui3-slideshow-panel">
<img src="http://img07.taobaocdn.com/tps/i7/T1UA4nXeVlXXXXXXXX-505-320.jpg" />
</li>
<li class="yui3-slideshow-panel">
<img src="http://img01.taobaocdn.com/tps/i1/T1sk8nXhlkXXXXXXXX-505-320.jpg" />
</li>
</ul>
<!-- Triggers -->
<ul class="yui3-slideshow-triggercon">
<li class="yui3-slideshow-trigger yui3-slideshow-selected">1</li>
<li class="yui3-slideshow-trigger">2</li>
<li class="yui3-slideshow-trigger">3</li>
</ul>
</div>
2011/6/21

5. Utility
• Automatically play
• Lazyload
• Circular
• Effect
• IO
• …
2011/6/21

6. Effect
• Tab
• Fade
• Slide
• Carousel
• …
2011/6/21

7. Effect - Fade
// 1 show toEl, fade fromEl to opacity 0
fromEl.setStyle('zIndex', 9);
toEl.setStyle('zIndex', 1);
toEl.setStyle('opacity', 1);
Y.Anim(fromEl, { 'opactity': 0 });
// 2 fade toEl to opaticy 1
fromEl.setStyle('zIndex', 1);
toEl.setStyle('zIndex', 9);
toEl.setStyle('opacity', 0);
Y.Anim(toEl, { 'opactity': 1 });
2011/6/21

8. Effect - Carousel
http://developer.yahoo.com/ypatterns/richinteraction/transition/slide.
html
http://developer.yahoo.com/ypatterns/selection/carousel.html
2011/6/21

9. Effect - Carousel
2011/6/21

10. Utility – Circular
• Move nodes
• Copy nodes
• Position: relative
adjustPos: function() { },
switchTo: function() { },
resetPos: function() { }
2011/6/21

11. Utility - Automatically Play
play: function() {
var self = this;
if (self.timer != null) { clearTimeout(self.timer); }
self.timer = setTimeout(function() {
self.next();
self.timer = setTimeout(arguments.callee, self.timeOut);
}, self.timeOut);
return this;
},
stop: function() {
var self = this;
if (self.timer) {
clearTimeout(self.timer);
self.timer = null;
}
return this;
}
2011/6/21

12. Design Pattern
• Adapter
• Factory
• Extend
• Plugin
• …
2011/6/21

13. Adapter – Y.Slide
if (that.effect == 'none') {
} else if (that.effect == 'v-slide') {
} else if (that.effect == 'h-slide') {
} else if (that.effect == 'fade') {
}
2011/6/21

14. Factory – Y.Anim And Y.Easing
var Easing = {
easeNone: function (t, b, c, d) {
return c*t/d + b;
},
easeIn: function (t, b, c, d) {
return c*(t/=d)*t + b;
},
...
};
var anim = new Y.Anim({
easing: Y.Easing.easeIn
});
2011/6/21

15. Plugin – S.Switchable
Switchable.Plugins = [];
Switchable.Plugins.push({
name: 'circular',
init: function(host) { }
});
S.each(Switchable.Plugins, function(plugin) {
if(plugin.init) {
plugin.init(self);
}
});
2011/6/21

16. Extend – S.Switchable
• Tabs
• Slide
• Carousel
• Accordion
2011/6/21

17. Extend – S.Switchable
function Switchable(container, config) { }
function Carousel(container, config) {
Carousel.superclass.constructor.call(
self,
container,
S.merge(defaultConfig, config)
);
}
S.extend(Carousel, S.Switchable);
Carousel.prototype._switchView = function() { };
2011/6/21

18. Slideshow
2011/6/21

19. Postscript
• Y.Anim
• CSS3 Transitions, Transforms &
Animation
• Memory Leak
2011/6/21

20. CSS3 Transitions, Transforms And Animation
• http://css3.bradshawenterprises.com/dem
os/multiple_images.php
• http://css3.bradshawenterprises.com/dem
os/imageslider.php
• http://css3.bradshawenterprises.com/
2011/6/21

21. Memory Leak
YUI 3.0.0 & YUI 3.1.0
2011/6/21

22. Memory Leak
YUI 3.2.0 & YUI 3.3.0
2011/6/21

23. Thanks!
2011/6/21