发布一个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();

 }
 

 

组件代码下载