发布一个JS图片阅览组件

 

这阵子琢磨着做一个可扩展的“相册”，其实就是一个JS做的用来展示图片的组件。 不过何为可扩展呢？就是图片切换的效果是可自定义的，通过这个组件，我们可以自定义出很多效果，不过这个东西还不算最终完成，现在搞出来先让大家试试

var pola = new PhotoLook( " contain " ); // 建立PhotoLook对象

 

这就是实例化这个组件的语句，cantain是你指定div的ID,这个是使用组件的人自己定义的

代码

/* PhotoLook大小的设置 */
pola.width = 240 ;
pola.height = 320 ;
/* 添加图片 */
pola.add( " http://img.overpic.net/thumbs/c/h/s/xchsypp84zbzof3ofu_s.jpg " );
pola.add( " http://img.overpic.net/thumbs/c/4/8/xc48uw6026mq5kuk2jzxg_s.jpg " );
pola.add( " http://img.overpic.net/thumbs/s/3/z/xs3zwhazx5db43ux8npmf_s.jpg " );
pola.add( " http://img.overpic.net/thumbs/l/n/u/xlnunh3z65oz4de4y5qs_s.jpg " );
pola.add( " http://img.overpic.net/thumbs/s/z/p/xszpf2cqu4la46wvve9n_s.jpg " );
pola.add( " http://img.overpic.net/thumbs/7/q/k/x7qk2am7qzgyi5s03bdxi_s.jpg " );
pola.add( " http://img.overpic.net/thumbs/b/7/w/xb7wghi7ivyxmbz7tb72e_s.jpg " );
pola.add( " http://img.overpic.net/thumbs/g/d/5/xgd532glxuyc7mmy2h99p_s.jpg " );
pola.add( " http://img.overpic.net/thumbs/i/m/f/ximfw3938obxo33qqjg_s.jpg " );
pola.init();

 

定义组件大小，还有利用提供的add方法来添加图片，然后调用init来初始化

代码

/* 淡出效果，效果可以自己做，自己添加，这个只是比较经典的（效果要接受一个参数，就是每一个小div，我们对它进行处理） */
var fadeOut = function (div){
div.style.zIndex = 1 ;
div.style.opacity = 0 ;
div.style.filter = " Alpha(Opacity='0') " ;
// div.filters.alpha.opacity=20;
( function (div,opacity){
var hide = function ()
{
opacity = opacity + 0.1 ;
div.style.opacity = opacity;
div.style.filter = " Alpha(Opacity=' " + opacity * 100 + " ') " ;
if (opacity < 1 )
{
setTimeout(hide, 100 );
}
}
hide();

})(div, 0 )



} ;

 

添加一个淡出效果，注意，这个效果不是一定的，我们可以自己做出其他效果，再调用addswitchMethod来添加进组件对象里：

/* 添加淡出效果（可以添加很多效果，并设定效果出现的顺序） */
pola.addswitchMethod(fadeOut, " show " );

 

下面是下面那个试例的效果矩阵配置

代码

/* 添加效果矩阵，仔细看矩阵数字的分布就可以知道哥大概了，数字小的会先发生效果 */
pola.addswitchTable([[ 1 , 2 , 3 , 4 ],
[ 2 , 3 , 4 , 5 ],
[ 3 , 4 , 5 , 6 ],
[ 4 , 5 , 6 , 7 ]]);
pola.addswitchTable([[ 1 , 2 , 1 , 2 ],
[ 2 , 1 , 2 , 1 ],
[ 1 , 2 , 1 , 2 ],
[ 2 , 1 , 2 , 1 ]]);
pola.addswitchTable([[ 1 , 2 , 3 , 4 ],
[ 1 , 2 , 3 , 4 ],
[ 1 , 2 , 3 , 4 ],
[ 1 , 2 , 3 , 4 ]]);
pola.addswitchTable([[ 1 , 2 , 3 , 4 ],
[ 12 , 13 , 14 , 5 ],
[ 11 , 16 , 15 , 6 ],
[ 10 , 9 , 8 , 7 ]]);
pola.addswitchTable([[ 1 , 2 , 3 , 4 ],
[ 8 , 7 , 6 , 5 ],
[ 5 , 6 , 7 , 8 ],
[ 4 , 3 , 2 , 1 ]]);
pola.addswitchTable([[ 1 , 2 , 3 , 1 ],
[ 3 , 4 , 4 , 2 ],
[ 2 , 4 , 4 , 3 ],
[ 1 , 3 , 2 , 1 ]]);
pola.addswitchTable([[ 1 , 1 , 4 , 4 ],
[ 1 , 1 , 4 , 4 ],
[ 3 , 3 , 2 , 2 ],
[ 3 , 3 , 2 , 2 ]]);
pola.addswitchTable([[ 1 , 10 , 4 , 14 ],
[ 9 , 3 , 13 , 7 ],
[ 2 , 12 , 6 , 16 ],
[ 11 , 5 , 15 , 8 ]]);

 

大家一看就应该知道效果矩阵和切换效果之间的关系了吧。
下面大家看看一个例子吧，对了，因为图片都是从互联网上面直接拿的，都没有经过处理，第一轮切换的时候会有点卡卡的感觉，但是当它所有图片都缓冲好的时候就不卡了，就可以看到完整的效果
以后会加上预加载的功能，就可以大大减少这种情况的影响
只有大家点击了“初始化”按钮之后才可以看到相册。。。这也是由于博客园条件限制的迂回解决方案

 

 

完整配置代码

代码

var pola = new PhotoLook( " contain " ); // 建立PhotoLook对象
/* PhotoLook大小的设置 */
pola.width = 240 ;
pola.height = 320 ;
/* 添加图片 */
pola.add( " http://img.overpic.net/thumbs/c/h/s/xchsypp84zbzof3ofu_s.jpg " );
pola.add( " http://img.overpic.net/thumbs/c/4/8/xc48uw6026mq5kuk2jzxg_s.jpg " );
pola.add( " http://img.overpic.net/thumbs/s/3/z/xs3zwhazx5db43ux8npmf_s.jpg " );
pola.add( " http://img.overpic.net/thumbs/l/n/u/xlnunh3z65oz4de4y5qs_s.jpg " );
pola.add( " http://img.overpic.net/thumbs/s/z/p/xszpf2cqu4la46wvve9n_s.jpg " );
pola.add( " http://img.overpic.net/thumbs/7/q/k/x7qk2am7qzgyi5s03bdxi_s.jpg " );
pola.add( " http://img.overpic.net/thumbs/b/7/w/xb7wghi7ivyxmbz7tb72e_s.jpg " );
pola.add( " http://img.overpic.net/thumbs/g/d/5/xgd532glxuyc7mmy2h99p_s.jpg " );
pola.add( " http://img.overpic.net/thumbs/i/m/f/ximfw3938obxo33qqjg_s.jpg " );
pola.init();

/* 淡出效果，效果可以自己做，自己添加，这个只是比较经典的（效果要接受一个参数，就是每一个小div，我们对它进行处理） */
var fadeOut = function (div){
div.style.zIndex = 1 ;
div.style.opacity = 0 ;
div.style.filter = " Alpha(Opacity='0') " ;
// div.filters.alpha.opacity=20;
( function (div,opacity){
var hide = function ()
{
opacity = opacity + 0.1 ;
div.style.opacity = opacity;
div.style.filter = " Alpha(Opacity=' " + opacity * 100 + " ') " ;
if (opacity < 1 )
{
setTimeout(hide, 100 );
}
}
hide();

})(div, 0 )



} ;




/* 添加淡出效果（可以添加很多效果，并设定效果出现的顺序） */
pola.addswitchMethod(fadeOut, " show " );


/* 添加效果矩阵，仔细看矩阵数字的分布就可以知道哥大概了，数字小的会先发生效果 */
pola.addswitchTable([[ 1 , 2 , 3 , 4 ],
[ 2 , 3 , 4 , 5 ],
[ 3 , 4 , 5 , 6 ],
[ 4 , 5 , 6 , 7 ]]);
pola.addswitchTable([[ 1 , 2 , 1 , 2 ],
[ 2 , 1 , 2 , 1 ],
[ 1 , 2 , 1 , 2 ],
[ 2 , 1 , 2 , 1 ]]);
pola.addswitchTable([[ 1 , 2 , 3 , 4 ],
[ 1 , 2 , 3 , 4 ],
[ 1 , 2 , 3 , 4 ],
[ 1 , 2 , 3 , 4 ]]);
pola.addswitchTable([[ 1 , 2 , 3 , 4 ],
[ 12 , 13 , 14 , 5 ],
[ 11 , 16 , 15 , 6 ],
[ 10 , 9 , 8 , 7 ]]);
pola.addswitchTable([[ 1 , 2 , 3 , 4 ],
[ 8 , 7 , 6 , 5 ],
[ 5 , 6 , 7 , 8 ],
[ 4 , 3 , 2 , 1 ]]);
pola.addswitchTable([[ 1 , 2 , 3 , 1 ],
[ 3 , 4 , 4 , 2 ],
[ 2 , 4 , 4 , 3 ],
[ 1 , 3 , 2 , 1 ]]);
pola.addswitchTable([[ 1 , 1 , 4 , 4 ],
[ 1 , 1 , 4 , 4 ],
[ 3 , 3 , 2 , 2 ],
[ 3 , 3 , 2 , 2 ]]);
pola.addswitchTable([[ 1 , 10 , 4 , 14 ],
[ 9 , 3 , 13 , 7 ],
[ 2 , 12 , 6 , 16 ],
[ 11 , 5 , 15 , 8 ]]);



/* 给各按钮添加事件处理程序，这部分已经不算配置PhotoLook了 */
var buttonautoPlay = document.getElementById( " autoPlay " );
buttonautoPlay.onclick = function (){
pola.autoPlay( 4000 );

}
var buttonstopAutoPlay = document.getElementById( " stopAutoPlay " );
buttonstopAutoPlay.onclick = function (){
pola.stopAutoPlay();

}

var buttonturn = document.getElementById( " turn " );
var textBox = document.getElementById( " Text1 " );
buttonturn.onclick = function () {
pola.goTo(parseInt(textBox.value));

}

var buttonprevious = document.getElementById( " previous " );
buttonprevious.onclick = function () {
pola.previous();

}

var buttonnext = document.getElementById( " next " );
buttonnext.onclick = function () {
pola.next();

}

 

组件代码下载

转载于:https://www.cnblogs.com/Pola/archive/2010/11/06/1870872.html