slideshow.js

这是一个ajax的例子大家好好的看看就是一个鱼眼的效果

					_this.largeNode.removeChild(_this.largeNode.firstChild);
				}
				_this.images[index].style.opacity = 0;
				_this.largeNode.appendChild(_this.images[index]);
				_this._currentImage = _this.images[index]._img;
				_this._fitSize();
								
			    var onEnd = function(a,b,c) {
					var img = _this.images[index].firstChild;
					if(img.tagName.toLowerCase() != "img"){img = img.firstChild;}
					title = img.getAttribute("title");
					
					if(_this._navShowing){
						_this._showNav(true);
					}
					dojo.publish(_this.getShowTopicName(), [{
						index: index,	
						title: title,
						url: img.getAttribute("src")
					}]);
        			if(callback) { callback(a,b,c); }
					_this._setTitle(title);
        		};
				
				dojo.fadeIn({
					node: _this.images[index],
					duration: 300,
					onEnd: onEnd
				}).play();
			}else{
				//If the image is not loaded yet, load it first, then show it.
				_this._loadImage(index, function(){
					dojo.publish(_this.getLoadTopicName(), [index]);
					_this.showImage(index, callback);	
				});
			}
		};

		//If an image is currently showing, fade it out, then show
		//the new image. Otherwise, just show the new image. 	
		if(current && current.length > 0){
			dojo.fadeOut({
				node: current[0],
				duration: 300,
				onEnd: function(){
					_this.hiddenNode.appendChild(current[0]);
					showOrLoadIt();
			}
			}).play();
		}else{
			showOrLoadIt();
		}
	},
	
	_fitSize: function(force){
		// summary: Fits the widget size to the size of the image being shown,
		//	or centers the image, depending on the value of 'fixedHeight'
		// force: Boolean
		//	If true, the widget is always resized, regardless of the value of 'fixedHeight'
		if(!this.fixedHeight || force){
			var height = (this._currentImage.height + (this.hasNav ? 20:0));
			dojo.style(this.innerWrapper, "height", height + "px");
			return;
		}
		dojo.style(this.largeNode, "paddingTop", this._getTopPadding() + "px");
	},
	
	_getTopPadding: function(){
		if(!this.fixedHeight){return 0;}
		// summary: Returns the padding to place at the top of the image to center it vertically.
		return (this.imageHeight - this._currentImage.height)/2;
	},
	
	_loadNextImage: function(){
		//summary: Load the next unloaded image.
		if(!this.autoLoad){ return; }
		while(this.images.length >= this._imageCounter && this.images[this._imageCounter]){
			this._imageCounter++;
		}
		this._loadImage(this._imageCounter);
	},
	
	_loadImage: function(index, callbackFn){
		// summary: Load image at specified index
		// description:
		//	This function loads the image at position 'index' into the
		//	internal cache of images.  This does not cause the image to be displayed.
		// index:
		//	The position in the data store to load an image from.
		// callbackFn:
		//	An optional function to execute when the image has finished loading.	
		if(this.images[index] || !this._request) { return; }
		
		var pageStart = index - (index % this.pageSize);

		this._request.start = pageStart;		

		this._request.onComplete = function(items){
			var diff = index - pageStart;
			if(items && items.length > diff){
				loadIt(items[diff]);
			}else{ /* Squelch - console.log("Got an empty set of items"); */ }
		}

		var _this = this;	
		var loadIt = function(item){			
			var url = _this.imageStore.getValue(item, _this.imageLargeAttr);
			var img = document.createElement("img");
			var div = document.createElement("div");
			div._img = img;

			var link = _this.imageStore.getValue(item,_this.linkAttr);
			if(!link || _this.noLink){ div.appendChild(img); 
			}else{
				var a = document.createElement("a");
				a.setAttribute("href", link);
				a.setAttribute("target","_blank");
				div.appendChild(a);
				a.appendChild(img);
			}

			div.setAttribute("id",_this.id + "_imageDiv" + index);
			dojo.connect(img, "onload", function(){
				_this._fitImage(img);
				div.setAttribute("width",_this.imageWidth);
				div.setAttribute("height",_this.imageHeight);				
				
				dojo.publish(_this.getLoadTopicName(), [index]);
				_this._loadNextImage();
				if(callbackFn){ callbackFn(); }
			});
			_this.hiddenNode.appendChild(div);

			var titleDiv = document.createElement("div");
			dojo.addClass(titleDiv, "slideShowTitle");
			div.appendChild(titleDiv);
		
			_this.images[index] = div;
			img.setAttribute("src", url);
			
			var title = _this.imageStore.getValue(item,_this.titleAttr);
			if(title){ img.setAttribute("title",title); } 
		}
		this.imageStore.fetch(this._request);
	},

	_stop: function(){
		// summary: Stops a running slide show.
		if(this._slideId){ clearTimeout(this._slideId); }
		this._slideId = null;
		this._timerCancelled = true;
		dojo.removeClass(this.domNode,"slideShowPaused");
	},

	_prev: function(){
		// summary: Show the previous image.
		// FIXME: either pull code from showNext/prev, or call it here
		if(this.imageIndex < 1){ return; }
		this.showImage(this.imageIndex - 1);
	},

	_next: function(){
		// summary: Show the next image
		this.showNextImage();
	},

	_startTimer: function(){
		// summary: Starts a timeout to show the next image when a slide show is active
		var id = this.id;
		this._slideId = setTimeout(function(){dijit.byId(id).showNextImage(true);}, this.slideshowInterval * 1000);
	},
	
	_calcNavDimensions: function() {
		// summary:
		//	Calculates the dimensions of the navigation controls
		dojo.style(this.navNode, "position", "absolute");
		
		//Place the navigation controls far off screen
		dojo.style(this.navNode, "top", "-10000px");
		
		//Make the navigation controls visible
		dojo._setOpacity(this.navNode, 99);
		
		this.navPlay._size = dojo.marginBox(this.navPlay);
		this.navPrev._size = dojo.marginBox(this.navPrev);
		this.navNext._size = dojo.marginBox(this.navNext);
		
		dojo._setOpacity(this.navNode, 0);
		dojo.style(this.navNode, "position", "");
		dojo.style(this.navNode, "top", "");		
	},

	_setTitle: function(title){
		// summary: Sets the title of the image to be displayed
		// title: String
		//	The String title of the image
		this.titleNode.innerHTML = dojo.string.substitute(this.titleTemplate,
			{ title: title, current: 1 + this.imageIndex, total: this.maxPhotos});
	},
	
	_fitImage: function(img) {
		// summary: Ensures that the image width and height do not exceed the maximum.
		// img: Node
		//	The image DOM node to optionally resize
		var width = img.width;
		var height = img.height;
		
		if(width > this.imageWidth){
			height = Math.floor(height * (this.imageWidth / width));
			img.setAttribute("height", height + "px");
			img.setAttribute("width", this.imageWidth + "px");			
		}
		if(height > this.imageHeight){
			width = Math.floor(width * (this.imageHeight / height));
			img.setAttribute("height", this.imageHeight + "px");
			img.setAttribute("width", width + "px");
		}
	},
	
	_handleClick: function(/* Event */e){
		// summary: Performs navigation on the images based on users mouse clicks
		// e:
		//	An Event object
		switch(e.target){
			case this.navNext:this._next(); break;
			case this.navPrev:this._prev(); break;
			case this.navPlay:this.toggleSlideShow(); break;
		}
	},
	
	_showNav: function(force){
		// summary:
		//	Shows the navigation controls
		// force: Boolean
		//	If true, the navigation controls are repositioned even if they are
		//	currently visible.
		if(this._navShowing && !force){return;}
		dojo.style(this.navNode, "marginTop", "0px");
		dojo.style(this.navPlay, "marginLeft", "0px");
		var wrapperSize = dojo.marginBox(this.outerNode);
		
		var margin = this._currentImage.height - this.navPlay._size.h - 10 + this._getTopPadding();
		
		if(margin > this._currentImage.height){margin += 10;}
		dojo[this.imageIndex < 1 ? "addClass":"removeClass"](this.navPrev, "slideShowCtrlHide");
		dojo[this.imageIndex + 1 >= this.maxPhotos ? "addClass":"removeClass"](this.navNext, "slideShowCtrlHide");
	
		var _this = this;
		if(this._navAnim) {
			this._navAnim.stop();
		}
		if(this._navShowing){return;}
		this._navAnim = dojo.fadeIn({node: this.navNode, duration: 300,
							onEnd: function(){_this._navAnim=null;}});
		
		this._navAnim.play();
		this._navShowing = true;
	},
	
	_hideNav: function(/* Event */e){
		// summary:	Hides the navigation controls
		// e: Event
		//	The DOM Event that triggered this function
		if(!e || !this._overElement(this.outerNode, e)) {
			var _this = this;
			if(this._navAnim) {
				this._navAnim.stop();
			}
			this._navAnim = dojo.fadeOut({node: this.navNode,duration:300,
						 onEnd: function(){_this._navAnim=null;}});
			this._navAnim.play();
			this._navShowing = false;
		}
	},
	
	_overElement: function(/*DomNode*/element, /*Event*/e){
		// summary:
		//	Returns whether the mouse is over the passed element.
		//	Element must be display:block (ie, not a <span>)
		
		//When the page is unloading, if this method runs it will throw an
		//exception.
		if(typeof(dojo)=="undefined"){return false;}
		element = dojo.byId(element);
		var m = {x: e.pageX, y: e.pageY};
		var bb = dojo._getBorderBox(element);
		var absl = dojo.coords(element, true);
		var left = absl.x;

		return (m.x >= left
			&& m.x <= (left + bb.w)
			&& m.y >= absl.y
			&& m.y <= (top + bb.h)
		);	//	boolean
	}
});

}