mootools_使用MooTools创建简单的幻灯片，第四部分：缩略图和标题

mootools

My "Create a Simple Slideshow Using MooTools" series has been hugely successful. The first step was laying the groundwork for the slideshow, the second step was adding controls and events to the slideshow, and the third step was recoding the slideshow into a sexy class. This fourth slideshow tutorial will add thumbnail previews and captions to the slideshow.

我的“使用MooTools创建简单的幻灯片”系列非常成功。 第一步是为幻灯片放映奠定基础 ，第二步是向 幻灯片 添加控件和事件 ，第三步是将幻灯片重新编码为性感类 。 第四个幻灯片演示教程将为幻灯片添加缩略图预览和标题。

View Demo 观看演示

没课？ WTF ！？ (No Class? WTF!?)

I've chosen to revert back to the "inline" code from the second tutorial. Why? I'm going a little bit off of the reservation with this one. I think classes are important to use when you want a more generic slideshow; this one will be a bit more customized. That isn't to say, however, that I wont be creating another class in the future.

我选择从第二个教程恢复为“内联”代码。 为什么？ 我要保留一点这个。 我认为当您想要更通用的幻灯片放映时，使用类很重要。 这将是更多定制。 但这并不是说我将来不会再创建另一个类。

HTML (The HTML)

Isn't it nice that our base HTML code hasn't changed since the first tutorial? :)

自从第一个教程以来我们的基本HTML代码没有发生变化，这很好吗？ :)

CSS (The CSS)

#slideshow-container	{ width:512px; height:384px; position:relative; }
#slideshow-container img { width:512px; height:384px; display:block; position:absolute; top:0; left:0; z-index:1; }
#slideshow-container-controls { margin:10px 0 0 0; }
	#slideshow-container-controls img { cursor:pointer; width:100px; height:75px; border:1px solid #ccc; float:left; margin:0 1px 0 0; }
#slideshow-container-caption  { height:70px; position:absolute; bottom:0; left:0; right:0; background:#000; z-index:10; overflow:hidden; }
	* html #slideshow-container-caption { width:100%; }
	#slideshow-container-caption h3 { font-size:24px; font-weight:bold; color:#fff; padding:10px 10px 3px 10px; }
	#slideshow-container-caption p	{ color:#eee; font-size:11px; padding:0 10px 10px 10px; }
.toc-active				{ border-color:#000; }

We've added a bit of CSS for the forthcoming controls/thumbnails and the caption elements. The caption will have a black background with light text. The thumbnails will be very small, floated next to each other, with fixed dimensions.

我们为即将发布的控件/缩略图和标题元素添加了一些CSS。 标题将带有浅色背景的黑色背景。 缩略图将非常小，彼此紧紧浮动，并且尺寸固定。

MooTools JavaScript (The MooTools JavaScript)

window.addEvent('domready',function() {
	/* settings */
	var showDuration = 5000;
	var container = $('slideshow-container');
	var images = container.getElements('img');
	var currentIndex = 0;
	var interval;
	var toc = [];
	var tocActive = 'toc-active';
	var thumbOpacity = 0.7;
	
	/* new: create caption area */
	var captionDIV = new Element('div',{
		id: 'slideshow-container-caption',
		styles: {
			//display:none,
			opacity: thumbOpacity
		}
	}).inject(container);
	var captionHeight = captionDIV.getSize().y;
	captionDIV.setStyle('height',0);
	
	/* new: starts the show */
	var start = function() { interval = show.periodical(showDuration); };
	var stop = function() { $clear(interval); };
	/* worker */
	var show = function(to) {
		images[currentIndex].fade('out');
		toc[currentIndex].removeClass(tocActive).fade(thumbOpacity);
		images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
		toc[currentIndex].addClass(tocActive).fade(1);
		captionDIV.set('tween',{
			onComplete: function() {
				captionDIV.set('tween',{
					onComplete: $empty
				}).tween('height',captionHeight);
				/* parse caption */
				var title = '';
				var captionText = '';
				if(images[currentIndex].get('alt')) {
					cap = images[currentIndex].get('alt').split('::');
					title = cap[0];
					captionText = cap[1];
					captionDIV.set('html','
' + title + '
' + (captionText ? '
' + captionText + '
' : ''));
				}
			}
		}).tween('height',0);
	};
	
	/* new: create preview area */
	var preview = new Element('div',{
		id: 'slideshow-container-controls'
	}).inject(container,'after');
	
	/* new: control: table of contents */
	images.each(function(img,i){
		/* add to table of contents */
		toc.push(new Element('img',{
			src: img.get('src'),
			title: img.get('alt'),
			styles: {
				opacity: thumbOpacity
			},
			events: {
				click: function(e) {
					if(e) e.stop();
					stop();
					show(i);
					start();
				},
				mouseenter: function() {
					this.fade(1);
				},
				mouseleave: function() {
					if(!this.hasClass(tocActive)) this.fade(thumbOpacity);
				}
			}	
		}).inject(preview));
		if(i > 0) { img.set('opacity',0); }
		
	});
	
	/* control: start/stop on mouseover/mouseout */
	container.addEvents({
		mouseenter: function() { stop(); },
		mouseleave: function() { start(); }
	});
	
	/* start once the page is finished loading */
	window.addEvent('load',function(){ show(0); start(); });
});

The first step is creating the caption container within the main image container. We measure the height of the caption container and hide it right away to prevent it from being seen. The next step is adding a few chained tweens within the show method that parses the image's alt attribute, sets the HTML within the caption container, and slides it up and down. I set the HTML of the caption container instead of using MooTools to create new H3 and P elements because (a) setting the HTML is faster and (b) we have no plan to do anything with each element individually.

第一步是在主图像容器内创建标题容器。 我们测量字幕容器的高度，并立即将其隐藏以防止其被看到。 下一步是在show方法内添加一些链接的补间，该补间可解析图像的alt属性，在标题容器内设置HTML，并将其上下滑动。 我设置字幕容器HTML而不是使用MooTools创建新的H3和P元素，因为(a)设置HTML更快，并且(b)我们没有计划对每个元素单独进行任何操作。

A preview container is also created to hold the thumbnails. As we cycle through the large images, we create IMG elements with a fixed size (from the CSS above) that will act as thumbnail navigation for the slideshow. As an image receives focus, it's border and opacity changes to show focus. Awesome!

还创建了一个预览容器来保存缩略图。 当我们循环浏览大图像时，我们将创建具有固定大小的IMG元素(来自上述CSS)，将其用作幻灯片的缩略图导航。 当图像获得焦点时，其边界和不透明度发生变化以显示焦点。 太棒了！

View Demo 观看演示

Do you like this version better than the previous? I certainly do. Look forward to a class version soon. Have any improvement ideas? Share them!

您是否比以前更喜欢此版本？ 当然可以 期待很快的上课版本。 有什么改进想法吗？ 分享他们！

翻译自: https://davidwalsh.name/slideshow-thumbnails-captions

mootools