js之图片轮换显示

首先感谢:http://www.cnblogs.com/cloudgamer/,很强很实用的一些js.

本篇原文出自http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html.

 　　因前一段做的一个门户网站首页确实用到了这样的js,轮流显示图片信息,其实很多门户网站都有类似的,可以去查看'页面源代码'寻找可重用js,着实麻烦.当时首先想到的是简单地用marquee 滚动实现,可就是初次打开时有空白出现(可能叫无缝滚动技术,有待下次解决).,后来在网上找的swf实现的,因为图片链接信息,要从数据库中读取,实时更新(可能确实可以,有待解决),,再后来直接整了个静态图片放上面(项目一直拖着,说服务器是unix要转成java做~~~)我呀晕囧o(╯□╰)o.

预实现效果 :::::

　　

首先,头部引入css,和js

代码

  1  < style type = " text/css " >
  2  .container{
  3      width:280px;
  4      height:200px;
  5      border:1px solid #eee;
  6      position:relative;
  7  }
  8  #idPicText{
  9      background:#eee;
 10      line - height:25px;
 11      text - align:center;
 12      font - weight:bold;
 13      width:282px;
 14      white - space:nowrap;
 15      overflow:hidden;
 16      font - size:12px;
 17  }
 18  #idPicText a{
 19      text - decoration:none;
 20      color:# 333 ;
 21      display:block;
 22  }
 23 
 24  #idNum{ position:absolute; right:5px; bottom:5px;}
 25  #idNum li{
 26       float : left;
 27      list - style:none;
 28      color: #fff;
 29      text - align: center;
 30      line - height: 16px;
 31      width: 16px;
 32      height: 16px;
 33      font - family: Arial;
 34      font - size: 12px;
 35      cursor: pointer;
 36      margin: 1px;
 37      border: 1px solid # 707070 ;
 38      background - color: #060a0b;
 39  }
 40  #idNum li.on{
 41      line - height: 18px;
 42      width: 18px;
 43      height: 18px;
 44      font - size: 14px;
 45      border:  0 ;
 46      background - color: #ce0609;
 47      font - weight: bold;
 48  }
 49 
 50  < / style>
 51  < script type = " text/javascript " >
 52  var  isIE  =  (document.all)  ?   true  :  false ;
 53 
 54  var  $  =   function  (id) {
 55       return   " string "   ==   typeof  id  ?  document.getElementById(id) : id;
 56  };
 57 
 58  var  Class  =  {
 59      create:  function () {
 60           return   function () {  this .initialize.apply( this , arguments); }
 61      }
 62  }
 63 
 64  var  Extend  =   function (destination, source) {
 65       for  ( var  property  in  source) {
 66          destination[property]  =  source[property];
 67      }
 68  }
 69 
 70  var  Bind  =   function (object, fun) {
 71       return   function () {
 72           return  fun.apply(object, arguments);
 73      }
 74  }
 75 
 76  var  Each  =   function (list, fun){
 77       for  ( var  i  =   0 , len  =  list.length; i  <  len; i ++ ) { fun(list[i], i); }
 78  };
 79 
 80 
 81  // ie only
 82  var  RevealTrans  =  Class.create();
 83  RevealTrans.prototype  =  {
 84    initialize:  function (container, options) {
 85       this ._img  =  document.createElement( " img " );
 86       this ._a  =  document.createElement( " a " );
 87      
 88       this ._timer  =   null ; // 计时器
 89       this .Index  =   0 ; // 显示索引
 90       this ._onIndex  =   - 1 ; // 当前索引
 91      
 92       this .SetOptions(options);
 93      
 94       this .Auto  =   !! this .options.Auto;
 95       this .Pause  =  Math.abs( this .options.Pause);
 96       this .Duration  =  Math.abs( this .options.Duration);
 97       this .Transition  =  parseInt( this .options.Transition);
 98       this .List  =   this .options.List;
 99       this .onShow  =   this .options.onShow;
100      
101       // 初始化显示区域
102       this ._img.style.visibility  =   " hidden " ; // 第一次变换时不显示红x图
103       this ._img.style.width  =   this ._img.style.height  =   " 100% " ;  this ._img.style.border  =   0 ;
104       this ._img.onmouseover  =  Bind( this ,  this .Stop);
105       this ._img.onmouseout  =  Bind( this ,  this .Start);
106      isIE  &&  ( this ._img.style.filter  =   " revealTrans() " );
107      
108       this ._a.target  =   " _blank " ;
109      
110      $(container).appendChild( this ._a).appendChild( this ._img);
111    },
112     // 设置默认属性
113    SetOptions:  function (options) {
114       this .options  =  { // 默认值
115          Auto:         true , // 是否自动切换
116          Pause:         1000 , // 停顿时间(微妙)
117          Duration:     1 , // 变换持续时间(秒)
118          Transition:     23 , // 变换效果(23为随机)
119          List:        [], // 数据集合,如果这里不设置可以用Add方法添加
120          onShow:         function (){} // 变换时执行
121      };
122      Extend( this .options, options  ||  {});
123    },
124    Start:  function () {
125      clearTimeout( this ._timer);
126       // 如果没有数据就返回
127       if ( ! this .List.length)  return ;
128       // 修正Index
129       if ( this .Index  <   0   ||   this .Index  >=   this .List.length){  this .Index  =   0 ; }
130       // 如果当前索引不是显示索引就设置显示
131       if ( this ._onIndex  !=   this .Index){  this ._onIndex  =   this .Index;  this .Show( this .List[ this .Index]); }
132       // 如果要自动切换
133       if ( this .Auto){
134           this ._timer  =  setTimeout(Bind( this ,  function (){  this .Index ++ ;  this .Start(); }),  this .Duration  *   1000   +   this .Pause);
135      }
136    },
137     // 显示
138    Show:  function (list) {
139       if (isIE){
140           // 设置变换参数
141           with ( this ._img.filters.revealTrans){
142              Transition  =   this .Transition; Duration  =   this .Duration; apply(); play();
143          }
144      }
145       this ._img.style.visibility  =   "" ;
146       // 设置图片属性
147       this ._img.src  =  list.img;  this ._img.alt  =  list.text;
148       // 设置链接
149       !! list[ " url " ]  ?  ( this ._a.href  =  list[ " url " ]) :  this ._a.removeAttribute( " href " );
150       // 附加函数
151       this .onShow();
152    },
153     // 添加变换对象
154    Add:  function (sIimg, sText, sUrl) {
155       this .List.push({ img: sIimg, text: sText, url: sUrl });
156    },
157     // 停止
158    Stop:  function () {
159      clearTimeout( this ._timer);
160    }
161  };
162  < / script>

可能会改动的:

1..container{ width:280px; height:200px; border:1px solid #eee; position:relative; }根据页面实际需要,修改图片宽度和高度..

2.this.options = {//默认值 Auto: true,//是否自动切换 Pause: 1000,//停顿时间(微妙) Duration: 1,//变换持续时间(秒) Transition: 23,//变换效果(23为随机) List: [],//数据集合,如果这里不设置可以用Add方法添加 onShow: function(){}//变换时执行 };修改持续时间及变换效果,停顿时间

然后把以下代码,放到页面的合适位置(建议不用改动id,class等)

< div id = " idPicShow "  class = " container " >
   < ul id = " idNum " >
   < / ul>
< / div>
< div id = " idPicText "   >< / div>

最后在模块下面调用js,

< script >
beginLunHuan();
< / script>

代码

function  beginLunHuan(){
// 添加变换对象
/*
var rvt = new RevealTrans("idPicShow");

rvt.Add('1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');
rvt.Add('2.jpg', '图片滑动展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html');
rvt.Add('3.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');
rvt.Add('4.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');
rvt.Add('5.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');
*/
<%    = str  %>
var   oText  =  $( " idPicText " ), arrImg  =  [];
var  oNum  =  $( " idNum " ), arrNum  =  [];
// 设置图片列表
Each(rvt.List,  function (list, i){
     // 图片式
     var  img  =  document.createElement( " img " );
    img.src  =  list[ " img " ]; img.alt  =  list[ " text " ];
    arrImg[i]  =  img;
     // 按钮式
     var  li  =  document.createElement( " li " );
    li.innerHTML  =  i  +   1 ;
    arrNum[i]  =  li;
    oNum.appendChild(li);
     // 事件设置
    img.onmouseover  =  li.onmouseover  =   function (){ rvt.Auto  =   false ; rvt.Index  =  i; rvt.Start(); };
    img.onmouseout  =  li.onmouseout  =   function (){ rvt.Auto  =   true ; rvt.Start(); };
});

// 设置图片列表样式 文本显示区域
rvt.onShow  =   function (){
     var  i  =   this .Index, list  =   this .List[i];
     // 图片式
    Each(arrImg,  function (o){ o.className  =   "" ; }); arrImg[i].className  =   " on " ;
     // 按钮式
    Each(arrNum,  function (o){ o.className  =   "" ; }); arrNum[i].className  =   " on " ;
     // 文本区域
    oText.innerHTML  =   !! list.url  ?   " <a href=' "   +  list.url  +   " ' target='_blank'> "   +  list.text  +   " </a> "  : list.text;
}

// 文本显示区域
oText.onmouseover  =   function (){ rvt.Auto  =   false ; rvt.Stop(); };
oText.onmouseout  =   function (){ rvt.Auto  =   true ; rvt.Start(); };
rvt.Start();
}

这里把调用的js放到一个函数体内beginLunHuan(),以免影响整个页面布局(实际的页面body已经是很大很大了)..

必须在模块下调用该函数,因所显示的图片信息从数据库读取的,所以这里用<% str %>,在后台为str赋值,

代码

        WebApplication1.Facade.DCtNews    tnews  =   new  WebApplication1.Facade.DCtNews();
         int  pagecount ,rowscount;
        dt  =  tnews.GetList_ByPage( " * " , " moduleCode=100 and isPass=1 " , " inDate desc,newsId desc " , 1 , 1 , 5 ,out pagecount,out rowscount);
        str  =   " var rvt = new RevealTrans('idPicShow'); " ;
         for ( int  index = 0 ;index < dt.Rows.Count;index ++ )
        {
            str += " rvt.Add(' " + dt.Rows[index][ " picUrl " ] + " ',' " + dt.Rows[index][ " newstitle " ] + " ','newsDetails.aspx?id= " + dt.Rows[index][ " newsId " ] + " '); " ;
        }

再次感谢 http://www.cnblogs.com/cloudgamer/,

原文档