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     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     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      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      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{ 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/,

原文档