imgslideshow2: 基于 Mootools 的图片幻灯插件
Posted by Ross Wan on 一月 30, 2009
之前写了个 jQuery 的图片幻灯插件，但存在不少问题， 例如“疯狂”点击导航按钮会显示不正常。现在用 Mootools 重写了一个 插件。（近来在学 Mootools，学习 Mootools 的源代码）
代码
/* ImgSlideShow, a plugin with mootools. It make the special images slide show.
*
* Licensed under The MIT License
*
* @author mrwlwan#gmail.com
* @date 01/27/2009
* @version 1.0
* @license http://www.opensource.org/licenses/mit-license.php The MIT License
*
* Usage:
* var myImgSlideShow = new ImgSlideShow($('mycontainor'));
* or
* var myImgSlideShow = new ImgSlideShow($('mycontainor'), {delay: 50000});
*
* Available methods:
* addImage(imgurl, href, where) add a image element, with the image url, reference url, position inserted.
* pause() pause the animation.
* resume() resume the animation.
*/
var ImgSlideShow = new Class({
Implements: Options,
// default settings
options: {
'delay': 3000, // set every image pauses time.
'navBnBgcolor': '#fff',
'navBnHeightLight': '#f00'
},
/* Initializes ImgSlideShow Object.
*
* @param {Element} container element which contains images.
* @param {Object} optional, adjust different settings, like delay time.
*/
initialize: function(imgContainer, options){
this.setOptions(options);
this.imgContainer = imgContainer; // images container element
this.imagesArray = imgContainer.getElements('img'); // all images elements array
this.navBar = null; // navigator bar element
this.curentImgEl = null; // image element displayed currently
this.timer = null; // timer, use to be cleared
this.setImgStyle(this.imagesArray);
this.imgContainer.setStyles({
'position': 'relative',
'overflow': 'hidden'
});
this.addNavBar();
this.action(0); // animate from the 0 index element.
},
/* Set the images' style.
*
* @param {Iterable} the image elements array.
*/
setImgStyle: function(imgs){
$each(imgs, function(item){
item.setStyles({
'visibility': 'hidden',
'display': 'block',
'position': 'absolute'
});
});
},
/* Add a image to the ImgSlideShow Object.
*
* @param {String} the imgages url.
* @param {String} optional, the href url.
* @param {Integer} optional, Insert the images to the possion of the imagesArray.
*/
addImage: function(imgurl, href, where){
var myhref = $pick(href, '#');
// if the user defined the images in the HTML file, just clone the first image element, and configs it with the user setting.
if(this.imagesArray.length){
var aEl = this.imagesArray[0].getParent().clone();
var newImageEl = aEl.getFirst();
newImageEl.set('src', imgurl);
aEl.set('href', myhref);
}else{
var newImageEl = new Element('img', {
'src': imgurl
});
var aEl = new Element('a', {
'href': myhref
});
aEl.grab(newImageEl);
}
this.setImgStyle([newImageEl]);
if($chk(where)){
var pos = parseInt(where);
if(pos >= 0 && pos < this.imagesArray.length){
aEl.inject(this.imagesArray[pos].getParent(), 'before');
this.imagesArray.splice(pos, 0, newImageEl);
// Refresh the navigator bar buttons.
this.addNavButton();
return;
}
}
this.imgContainer.grab(aEl);
this.imagesArray.push(newImageEl);
// Refresh the navigator bar buttons.
this.addNavButton();
},
/* Remove the special image element.
*
* @param {Integer}
*/
removeImage: function(index){
var index = parseInt(index);
if(!$chk(index) || index < 0 || index >= this.imagesArray.length){
return;
}
this.imagesArray[index].getParent().dispose();
this.imagesArray.splice(index, 1);
this.addNavButton();
},
/* Add a navigator bar.
*/
addNavBar: function(){
var navBar = new Element('div', {
'id': 'navBar0000'
});
navBar.setStyles({
'position': 'absolute',
'z-index': 100,
'right': '5px',
'bottom': '5px',
'height': '20px',
'width': (this.imgContainer.getSize().x - 20),
'padding-right': 5,
'overflow': 'hidden'
});
navBar.inject(this.imgContainer, 'top');
this.navBar = navBar;
this.addNavButton();
},
/* Add some buttons to the navigator bar, or refresh the buttons.
*
*/
addNavButton: function(){
if($chk(this.navBar)){
this.navBar.empty();
}
this.imagesArray.each(function(item, index){
var newBn = new Element('div', {
'class': 'navbnclass000'
});
newBn.setStyles({
'float': 'right',
'opacity': 0.5,
'width': '20px',
'height': '20px',
'color': '#000',
'background-color': this.options['navBnBgcolor'],
'text-align': 'center',
'line-height': '20px',
'margin-right': '2px',
'cursor': 'pointer',
'font-weight': 'bold'
});
newBn.store('imgEl', item); // Store the relative image element to the navigator bar button element.
newBn.store('index', index); // store the relative index of the image element to the navigator bar button element.
item.store('bn', newBn); //Store the relative navigator bar button element to the image element.
// onClick event, just stop current animation, and resume from the new index.
newBn.addEvent('click', function(e){
e.stop();
var targetEl = e.target;
targetEl.setStyle('background-color', this.options['navBnHeightLight']);
this.stop();
this.action(targetEl.retrieve('index'));
}.bind(this));
newBn.appendText(index+1);
newBn.inject(this.navBar, 'top');
}, this);
},
/* Action the animation. Use recursion algorithm.
*
* @param {Integer} animate from the index.
*/
action: function(index){
var imagesArrayLength = this.imagesArray.length;
if(imagesArrayLength<2){
return;
}
if($defined(index) && (index >= imagesArrayLength)){
index = parseInt(index) % imagesArrayLength;
}
this.curentImgEl = this.imagesArray[index];
this.curentImgEl.retrieve('bn').setStyle('background-color', this.options['navBnHeightLight']);
this.curentImgEl.set('tween', {
duration: 500
}).fade('in').get('tween').chain(function(){
this.timer = this.subAction.delay(this.options['delay'], this, index + 1);
}.bind(this));
},
/* Used in the action function.
*
* @param {Integer} animate from the index.
*/
subAction: function(index){
this.curentImgEl.retrieve('bn').setStyle('background-color', this.options['navBnBgcolor']);
this.curentImgEl.fade('out').get('tween').chain(function(){
this.action(index);
}.bind(this));
},
/* Stop the animation.
*/
stop: function(){
$clear(this.timer);
this.curentImgEl.get('tween').cancel();
this.curentImgEl.setStyle('visibility', 'hidden');
this.curentImgEl.retrieve('bn').setStyle('background-color', this.options['navBnBgcolor']);
},
/* Pause the animation.
*
*/
pause: function(){
$clear(this.timer);
this.curentImgEl.get('tween').cancel();
this.curentImgEl.setStyles({
'visibility': 'visible',
'opacity': 1
});
},
/* Resume the animation.
*/
resume: function(){
$clear(this.timer);
this.curentImgEl.get('tween').cancel();
this.action(this.curentImgEl.retrieve('bn').retrieve('index'));
}
});
用法示例
<html>
<head>
<title>Demo!</title>
<script type="text/javascript" src="mootools-1.2.1.js"></script>
<script type="text/javascript" src="imgslideshow2.js"></script>
<script type="text/javascript">
var imgSlideShow = new ImgSlideShow($('imgscontainer'), {delay:3000});
imgSlideShow.addImage('imgs/2.jpg');
imgSlideShow.addImage('imgs/3.jpg', '#', 4);
imgSlideShow.removeImage(3);
$('pausebn').addEvent('click', function(){
imgSlideShow.pause();
});
$('resumebn').addEvent('click', function(){
imgSlideShow.resume();
});
</script>
</head>
<body>
<div id="imgscontainer">
<a href='#'><img class='image' src="imgs/1.jpg"/></a>
<a href='#'><img class='image' src="imgs/2.jpg"/></a>
<a href='#'><img class='image' src="imgs/3.jpg"/></a>
<a href='#'><img class='image' src="imgs/4.jpg"/></a>
<a href='#'><img class='image' src="imgs/5.jpg"/></a>
</div>
<div id="bns">
<button id="pausebn">Pause</button>
<button id="resumebn">Resume</button>
</div>
</body>
</html>
语法
var myImgSlideShow = new ImgSlideShow(element, [, options]);
参数
- element – 图片的容器对象。
- options – 可选。如下的可选项
可选项
- delay – 默认为3000（3秒）。设置图片的显示停留时间。
- navBnBgcolor – 右下角导航按钮的背景颜色。
- navBnHeightLight 导航按钮高亮时的背景颜色。
可用方法
- addImage(imgurl, where) – 在 where 位置上添加一张图片。
- removeImage(index) – 删除 index 位置上的图片
- pause() – 暂停动画。
- resume() – 重新开始动画。
兼容性
支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+
This entry was posted on 一月 30, 2009 在 6:53 下午 and is filed under Ajax, Mootools. Tagged: images slide show, Mootools, plugins. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, 或 trackback from your own site.
