slideshow.js

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

if(!dojo._hasResource["dojox.image.SlideShow"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.image.SlideShow"] = true;
dojo.provide("dojox.image.SlideShow");
//
// dojox.image.SlideShow courtesy Shane O Sullivan, licensed under a Dojo CLA 
// For a sample usage, see http://www.skynet.ie/~sos/photos.php
//
// @author  Copyright 2007 Shane O Sullivan ([e-mail])
//
//	TODO: more cleanups
//
dojo.require("dojo.string");
dojo.require("dojo.fx");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.declare("dojox.image.SlideShow",
	[dijit._Widget, dijit._Templated],
	{
	// summary: A Slideshow Widget

	// imageHeight: Number
	//	The maximum height of an image
	imageHeight: 375,
	
	// imageWidth: Number
	//	The maximum width of an image.
	imageWidth: 500,

	// title: String
	//	the initial title of the SlideShow 
	title: "",

	// titleTemplate: String
	//	a way to customize the wording in the title. supported parameters to be populated are:
	//		${title} = the passed title of the image
	//		${current} = the current index of the image
	//		${total} = the total number of images in the SlideShow
	//
	//	should add more?
	titleTemplate: '${title} <span class="slideShowCounterText">(${current} of ${total})</span>',

	// noLink: Boolean
	//	Prevents the slideshow from putting an anchor link around the displayed image
	//	enables if true, though still will not link in absence of a url to link to
	noLink: false,

	// loop: Boolean
	//	true/false - make the slideshow loop
	loop: true,

	// hasNav: Boolean
	//	toggle to enable/disable the visual navigation controls
	hasNav: true,

	// images: Array
	// Contains the DOM nodes that individual images are stored in when loaded or loading.
	images: [],
	
	// pageSize: Number
	//	The number of images to request each time.
	pageSize: 20,
		
	// autoLoad: Boolean
	//	If true, then images are preloaded, before the user navigates to view them.
	//	If false, an image is not loaded until the user views it.
	autoLoad: true,

	// autoStart: Boolean
	//	If true, the SlideShow begins playing immediately
	autoStart: false,
	
	// fixedHeight: Boolean
	// If true, the widget does not resize itself to fix the displayed image.
	fixedHeight: false,

	// imageStore: Object
	//	Implementation of the dojo.data.api.Read API, which provides data on the images
	//	to be displayed.
	imageStore: null,
		
	// linkAttr: String
	//	Defines the name of the attribute to request from the store to retrieve the
	//	URL to link to from an image, if any.
	linkAttr: "link",
	
	// imageLargeAttr: String
	//	Defines the name of the attribute to request from the store to retrieve the
	//	URL to the image.
	imageLargeAttr: "imageUrl",
	
	// titleAttr: String
	//	Defines the name of the attribute to request from the store to retrieve the
	//	title of the picture, if any.
	titleAttr: "title",

	// slideshowInterval: Number
	// Time, in seconds, between image transitions during a slideshow.
	slideshowInterval: 3,
	
	templateString:"<div dojoAttachPoint=\"outerNode\" class=\"slideShowWrapper\">\n\t<div style=\"position:relative;\" dojoAttachPoint=\"innerWrapper\">\n\t\t<div class=\"slideShowNav\" dojoAttachEvent=\"onclick: _handleClick\">\n\t\t\t<div class=\"dijitInline slideShowTitle\" dojoAttachPoint=\"titleNode\">${title}</div>\n\t\t</div>\n\t\t<div dojoAttachPoint=\"navNode\" class=\"slideShowCtrl\" dojoAttachEvent=\"onclick: _handleClick\">\n\t\t\t<span dojoAttachPoint=\"navPrev\" class=\"slideShowCtrlPrev\"></span>\n\t\t\t<span dojoAttachPoint=\"navPlay\" class=\"slideShowCtrlPlay\"></span>\n\t\t\t<span dojoAttachPoint=\"navNext\" class=\"slideShowCtrlNext\"></span>\n\t\t</div>\n\t\t<div dojoAttachPoint=\"largeNode\" class=\"slideShowImageWrapper\"></div>\t\t\n\t\t<div dojoAttachPoint=\"hiddenNode\" class=\"slideShowHidden\"></div>\n\t</div>\n</div>\n",
	
	// _tempImgPath: URL
	//	URL to the image to display when an image is not yet fully loaded.
	_tempImgPath: dojo.moduleUrl("dojo", "resources/blank.gif"),

	// _imageCounter: Number
	//	A counter to keep track of which index image is to be loaded next
	_imageCounter: 0,
	
	// _tmpImage: DomNode
	//	The temporary image to show when a picture is loading.
	_tmpImage: null,
	
	// _request: Object
	//	Implementation of the dojo.data.api.Request API, which defines the query 
	//	parameters for accessing the store.
	_request: null,

	postCreate: function(){
		// summary: Initilizes the widget, sets up listeners and shows the first image
		this.inherited(arguments);
		var img = document.createElement("img");

		// FIXME: should API be to normalize an image to fit in the specified height/width?
		img.setAttribute("width", this.imageWidth);
		img.setAttribute("height", this.imageHeight);

		if(this.hasNav){
			dojo.connect(this.outerNode, "onmouseover", function(evt){
				try{_this._showNav();}
				catch(e){} //TODO: remove try/catch
			});		
			dojo.connect(this.outerNode, "onmouseout", function(evt){
				try{_this._hideNav(evt);}
				catch(e){} //TODO: remove try/catch
			});
		}
		
		this.outerNode.style.width = this.imageWidth + "px";

		img.setAttribute("src", this._tempImgPath);
		var _this = this;
		
		this.largeNode.appendChild(img);
		this._tmpImage = this._currentImage = img;
		this._fitSize(true);
		
		this._loadImage(0, function(){
		     _this.showImage(0);
		});
		this._calcNavDimensions();
	},

	setDataStore: function(dataStore, request, /*optional*/paramNames){
		// summary: Sets the data store and request objects to read data from.
		// dataStore:
		//	An implementation of the dojo.data.api.Read API. This accesses the image
		//	data.
		// request:
		//	An implementation of the dojo.data.api.Request API. This specifies the
		//	query and paging information to be used by the data store
		// paramNames:
		//	An object defining the names of the item attributes to fetch from the
		//	data store.  The three attributes allowed are 'linkAttr', 'imageLargeAttr' and 'titleAttr'
		this.reset();
		var _this = this;
		
		this._request = {
			query: {},
			start: request.start || 0,
			count: request.count || this.pageSize,
			onBegin: function(count, request){
				_this.maxPhotos = count;
			}
		};
		if(request.query){ dojo.mixin(this._request.query, request.query); }
		if(paramNames){
			dojo.forEach(["imageLargeAttr", "linkAttr", "titleAttr"], function(attrName){
				if(paramNames[attrName]){ this[attrName] = paramNames[attrName]; }	
			}, this);
		}
	
		var _complete = function(items){
			_this.showImage(0); 
			_this._request.onComplete = null;
			if(_this.autoStart){
				_this.toggleSlideShow(); 
			}
		};
		
		this.imageStore = dataStore;
		this._request.onComplete = _complete;
		this._request.start = 0;
		this.imageStore.fetch(this._request);
	},

	reset: function(){
		// summary: Resets the widget to its initial state
		// description: Removes all previously loaded images, and clears all caches.
		while(this.largeNode.firstChild){
			this.largeNode.removeChild(this.largeNode.firstChild);
		}
		this.largeNode.appendChild(this._tmpImage);
		while(this.hiddenNode.firstChild){
			this.hiddenNode.removeChild(this.hiddenNode.firstChild);
		}
		dojo.forEach(this.images, function(img){
			if(img && img.parentNode){ img.parentNode.removeChild(img); }
		});
		this.images = [];
		this.isInitialized = false;
		this._imageCounter = 0;
	},

	isImageLoaded: function(index){
		// summary: Returns true if image at the specified index is loaded, false otherwise.
		// index:
		//	The number index in the data store to check if it is loaded.
		return this.images && this.images.length > index && this.images[index];
	},

	moveImageLoadingPointer: function(index){
		// summary: If 'autoload' is true, this tells the widget to start loading
		//	images from the specified pointer.
		// index:
		//	The number index in the data store to start loading images from.
		this._imageCounter = index;
	},
	
	destroy: function(){
		// summary: Cleans up the widget when it is being destroyed
		if(this._slideId) { this._stop(); }
		this.inherited(arguments);
	},

	showNextImage: function(inTimer, forceLoop){
		// summary: Changes the image being displayed to the next image in the data store
		// inTimer: Boolean
		//	If true, a slideshow is active, otherwise the slideshow is inactive.
		if(inTimer && this._timerCancelled){return false;}
		
		if(this.imageIndex + 1 >= this.maxPhotos){
			if(inTimer && (this.loop || forceLoop)){ this.imageIndex = -1; }
			else{
				if(this._slideId){ this._stop(); }
				return false;
			}
		}
		var _this = this;
		this.showImage(this.imageIndex + 1, function(){
			if(inTimer){ _this._startTimer(); }
		});
		return true;
	},

	toggleSlideShow: function(){
		// summary: Switches the slideshow mode on and off.
		if(this._slideId){
			this._stop();
		}else{
			dojo.toggleClass(this.domNode,"slideShowPaused");			
			this._timerCancelled = false;
			var success = this.showNextImage(true, true);
			if(!success){
				this._stop();
			}
		}
	},

	getShowTopicName: function(){
		// summary: Returns the topic id published to when an image is shown
		// description:
		//	The information published is: index, title and url
		return (this.widgetId || this.id) + "/imageShow";
	},

	getLoadTopicName: function(){
		// summary: Returns the topic id published to when an image finishes loading.
		// description:
		//	The information published is the index position of the image loaded.
		return (this.widgetId ? this.widgetId : this.id) + "/imageLoad";
	},

	showImage: function(index, /* Function? */callback){
		// summary: Shows the image at index 'index'.
		// index: Number
		//	The position of the image in the data store to display
		// callback: Function
		//	Optional callback function to call when the image has finished displaying.
		
		if(!callback && this._slideId){ this.toggleSlideShow(); }
		var _this = this;
		var current = this.largeNode.getElementsByTagName("div");
		this.imageIndex = index;

		var showOrLoadIt = function() {
			//If the image is already loaded, then show it. 
			if(_this.images[index]){
				while(_this.largeNode.firstChild){