mootools_使用MooTools创建简单的幻灯片演示，第二部分：控件和事件-CSDN博客

mootools

Last week we created a very simple MooTools slideshow script. The script was very primitive: no events and no next/previous controls -- just cross-fading between images. This tutorial will take the previous slideshow script a step further by:

上周，我们创建了一个非常简单的MooTools幻灯片脚本。该脚本非常原始：没有事件，也没有下一个/上一个控件-只是图像之间的淡入淡出。本教程将通过以下步骤使以前的幻灯片放映脚本更进一步：

Adding "Next" and "Previous" controls.
添加“下一个”和“上一个”控件。
Adding a "Table of Contents" so the user may click to any image.
添加“目录”，以便用户可以单击任何图像。
Pausing the slideshow when the user places their mouse in the container; resuming the slideshow when the use mouses out.
当用户将鼠标放在容器中时，暂停幻灯片放映；使用鼠标时恢复幻灯片播放。

Obviously our MooTools JavaScript code is going to change quite a bit so be prepared to (mostly) restructure the previous post's JavaScript code.

显然，我们的MooTools JavaScript代码将发生很大变化，因此请准备好(主要是)重组前一篇文章JavaScript代码。

View Demo 观看演示

HTML (The HTML)


<div id="slideshow-container">
	<img src="slideshow/cricci1.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci2.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci3.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci4.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci5.jpg" alt="Christina Ricci" />
</div>

Nothing has changed from the previous post. Just images of Christina Ricci which will set your heart ablaze.

与以前的帖子没有任何变化。克里斯蒂娜·里奇(Christina Ricci)的图像，这会让您心动

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; }
.toc					{ position:absolute; left:0; bottom:20px; z-index:2; display:block; width:20px; background:#6D84B4; color:#fff; text-align:center; padding:3px; text-decoration:none; }
.toc-active				{ background:#fff; color:#6D84B4; }
#next					{ position:absolute; bottom:20px; right:20px; z-index:2; display:block; width:20px; background:#6D84B4; color:#fff; text-align:center; padding:3px; text-decoration:none; }
#previous				{ position:absolute; bottom:20px; right:60px; z-index:2; display:block; width:20px; background:#6D84B4; color:#fff; text-align:center; padding:3px; text-decoration:none; }

We've added the toc and toc-active CSS classes. The toc-classed items will be absolutely position at the bottom of the container. We'll calculate the left value of each item with MooTools as we don't want them to overlap. We've also defined CSS rules for the Next and Previous buttons we will generate. Feel free to style the TOC items and buttons any way you'd like.

我们添加了toc和toc-active CSS类。分类目录的项目将绝对位于容器的底部。我们将使用MooTools计算每个项目的左侧值，因为我们不希望它们重叠。我们还为将要生成的Next和Previous按钮定义了CSS规则。您可以根据自己的喜好随意设置目录项和按钮的样式。

MooTools JavaScript (The MooTools JavaScript)


window.addEvent('domready',function() {
	/* settings */
	var showDuration = 3000;
	var container = $('slideshow-container');
	var images = container.getElements('img');
	var currentIndex = 0;
	var interval;
	var toc = [];
	var tocWidth = 20;
	var tocActive = 'toc-active';
	
	/* 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);
		images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
		toc[currentIndex].addClass(tocActive);
	};
	
	/* new: control: table of contents */
	images.each(function(img,i){
		toc.push(new Element('a',{
			text: i+1,
			href: '#',
			'class': 'toc' + (i == 0 ? ' ' + tocActive : ''),
			events: {
				click: function(e) {
					if(e) e.stop();
					stop();
					show(i);
				}
			},
			styles: {
				left: ((i + 1) * (tocWidth + 10))
			}
		}).inject(container));
		if(i > 0) { img.set('opacity',0); }
	});
	
	/* new: control: next and previous */
	var next = new Element('a',{
		href: '#',
		id: 'next',
		text: '>>',
		events: {
			click: function(e) {
				if(e) e.stop();
				stop(); show();
			}
		}
	}).inject(container);
	var previous = new Element('a',{
		href: '#',
		id: 'previous',
		text: '<<',
		events: {
			click: function(e) {
				if(e) e.stop();
				stop(); show(currentIndex != 0 ? currentIndex -1 : images.length-1);
			}
		}
	}).inject(container);
	
	/* new: 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(){
		start();
	});
});

I told you it changed quite a bit, didn't I? Here's what I added:

我告诉过你它改变了很多，不是吗？这是我添加的内容：

I created start, stop, and show functions which do exactly as they're named.
我创建了start ， stop和show函数，它们的功能与命名的完全相同。
Injected table of contents links based upon the number of elements in the slideshow. Each TOC link has a click event which skips to the corresponding slide.
根据幻灯片元素的数量，插入的目录链接。每个TOC链接都有一个click事件，可跳至相应的幻灯片。
Created next and previous links to move forward and backward in the show.
创建了下一个和上一个链接以在节目中向前和向后移动。
Added mouseenter and mouseleave events to stop and start the show when the user triggers each event.
添加了mouseenter和mouseleave事件，以在用户触发每个事件时停止和开始显示。

The added code blocks were very simple to add; taking them one at a time kept creating these enhancements quick.

添加的代码块非常易于添加；一次带他们一个就可以快速创建这些增强功能。

View Demo 观看演示