Slide

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