带缩略图悬浮按钮的js幻灯片js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是带缩略图悬浮按钮的js幻灯片js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>基于mootools实现的带缩略图悬浮按钮幻灯片演示效果</title>
    <meta name="keywords" content="mootools,缩略图,悬浮按钮" />
    <link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" />
	<script type="text/javascript" src="js/mootools.js"></script>
	<script type="text/javascript" src="js/slideshow.js"></script>
	<script type="text/javascript">
	//<![CDATA[
	  window.addEvent('domready', function(){
	    var data = {
	      '1.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' }, 
	      '2.jpg': { caption: 'A Ceibu tree.' }, 
	      '3.jpg': { caption: 'The view from Volcano Maderas.' }, 
	      '4.jpg': { caption: 'Beer and ice cream.' }
	    };
	    var myShow = new Slideshow('show', data, {controller: true, height: 300, hu: 'images/', thumbnails: true, width: 400});
	  });
	//]]>
	</script>
</head>
<body>

    <div id="content">
	
  <br><br><br>
<!--DEMO start-->
  <div id="show" class="slideshow">
    <img src="images/1.jpg" alt="Volcano Asención in Ometepe, Nicaragua." />
  </div>
  
  <br><br><br><Br><br><br>

<div style="text-align:center; clear:both; margin:5px auto">

</div>
<!--DEMO end-->
</div>
</body>
</html>

JS代码(slideshow.flash.js):

/**Script:Slideshow.Flash.jsSlideshow.Flash - Flash extension for Slideshow.License:MIT-style license.Copyright:Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).Dependencies:Slideshow.*/
Slideshow.Flash = new Class({
	Extends:Slideshow,options:{
	color:['#FFF']}
,/**Constructor:initializeCreates an instance of the Slideshow class.Arguments:element - (element) The wrapper element.data - (array or object) The images and optional thumbnails,captions and links for the show.options - (object) The options below.Syntax:var myShow = new Slideshow.Flash(element,data,options);
	*/
initialize:function(el,data,options){
	options.overlap = true;
	if (options.color)options.color = $splat(options.color);
	this.parent(el,data,options);
}
,/**Private method:showDoes the slideshow effect.*/
_show:function(fast){
	if (!this.image.retrieve('tween')) $$(this.a,this.b).set('tween',{
	'duration':this.options.duration,'link':'cancel','onStart':this._start.bind(this),'onComplete':this._complete.bind(this),'property':'opacity'}
);
	if (fast)this.image.get('tween').cancel().set(1);
	else{
	this.slideshow.retrieve('images').setStyle('background',this.options.color[this.slide % this.options.color.length]);
	var img = (this.counter % 2) ? this.a:this.b;
	img.get('tween').cancel().set(0);
	this.image.get('tween').set(0).start(1);
}
}
}
);

JS代码(slideshow.push.js):

/**Script:Slideshow.Push.jsSlideshow.Push - Push extension for Slideshow.License:MIT-style license.Copyright:Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).Dependencies:Slideshow.Mootools 1.2 More:Fx.Elements.*/
Slideshow.Push = new Class({
	Extends:Slideshow,/**Constructor:initializeCreates an instance of the Slideshow class.Arguments:element - (element) The wrapper element.data - (array or object) The images and optional thumbnails,captions and links for the show.options - (object) The options below.Syntax:var myShow = new Slideshow.Push(element,data,options);
	*/
initialize:function(el,data,options){
	options.overlap = true;
	this.parent(el,data,options);
}
,/**Private method:showDoes the slideshow effect.*/
_show:function(fast){
	var images = [this.image,((this.counter % 2) ? this.a:this.b)];
	if (!this.image.retrieve('fx'))this.image.store('fx',new Fx.Elements(images,{
	'duration':this.options.duration,'link':'cancel','onStart':this._start.bind(this),'onComplete':this._complete.bind(this),'transition':this.options.transition}
));
	this.image.set('styles',{
	'left':'auto','right':'auto'}
).setStyle(this.direction,this.width);
	var values ={
	'0':{
}
,'1':{
}
}
;
	values['0'][this.direction] = [this.width,0];
	values['1'][this.direction] = [0,-this.width];
	if (images[1].getStyle(this.direction) == 'auto'){
	var width = this.width - images[1].width;
	images[1].set('styles',{
	'left':'auto','right':'auto'}
).setStyle(this.direction,width);
	values['1'][this.direction] = [width,-this.width];
}
if (fast){
	for (var prop in values)values[prop][this.direction] = values[prop][this.direction][1];
	this.image.retrieve('fx').cancel().set(values);
}
elsethis.image.retrieve('fx').start(values);
}
}
);

附件:下载该文件资源,减少时间成本(增值服务)