<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Revealtrans </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style>
Body{background-color: #CCCCCC;}
#container {width:525px;text-align:center;margin:0 Auto;}
#context {background-color: #777777; border:2px solid #555555; width:500px;}
#context img {border:none;margin:0px;}
#nav {width:510px;height:140px;overflow:hidden;list-style:none;margin-top:3px;position:relative; padding-left:0px; MARGIN-LEFT:3PX}
#nav li {float:left; margin:0 7px 4px 0;border:2px solid #555;}
#nav Div {width:90px;height:60px; overflow:hidden;}
#nav div img {width:95px;height:60px;}
</style>
<script>
/*!
* Revealtrans
* http://www.cnblogs.com/goodness2010/
*
* Copyright (c) 2009 GoodNess2010
* DATE:2009-1-13 (Wednesday)
*/
var $ = function (ID) {return document.getElementById (ID)};
var Isie = navigator.userAgent.indexOf (' msie ')!=-1? True:false;
var $extend = function (A, b) {for (Var C in B) {a[c] = B[c];
var ForEach = function (array, callback, Thisp) {
if (Array.foreach) {
Array.foreach (callback, THISP);
}else {
for (var i = 0, len = Array.Length i < len; i++) {
if (i in array) Callback.call (Thisp, array[i], I, array);
}
}
};
var Revealtrans = function (cId, options) {
This.cid = cId;
This.timer = null;
This.curimg = null;
This.index = 1;
$extend (This, this.setoptions (options));
This.init ();
};
Revealtrans.prototype = {
Constructor:revealtrans,
initialization function
Init:function () {
This.createstruct ();
This.bindevents ();
},
Set Default parameters
Setoptions:function (options) {
This.options = {
Auto:true,//whether to automatically switch
Transition:23,//filter parameters (see instructions)
duration:1.5,//Filter conversion time (in seconds)
MINOPA:40,//navigation image initial transparency
MAXOPA:100,//final transparency of the navigation picture
pause:2000,//automatic switching time interval
COLL: [],//Picture collection
Onend:function () {}//Picture filter conversion End Custom Function
};
Return $extend (this.options, Options | | {});
},
Generate HTML structure
Createstruct:function () {
var _html = ', _this = this;
ForEach (This.coll, function (O) {
_html + = ' <li><div></div></li> ';
});
$ (this.cid). InnerHTML = _html;
$ (' context '). InnerHTML = ' ';
This.bindevents ();
},
Set transparency
Setopacity:function (O, opacity) {
if (!! Isie) O.style.filter = "Alpha (opacity=" + opacity + ")";
else o.style.opacity = opacity/100;
},
Binding related events
Bindevents:function () {
var IMGs = $ (this.cid). getElementsByTagName (' img '), _this = this;
ForEach (IMGs, function (O, index) {
Index > 0? _this.setopacity (O, _this.minopa): _this.curimg = O;
O.onmouseover = function () {this.style.cursor = ' pointer ';};
O._index = index;
O.onclick = function () {_this.onstart (this); _this.index = This._index;};
});
Default Demo First picture
This.onstart (Imgs[0]);
},
Start Filter Switching
Onstart:function (O) {
var _this = This, context = $ (' context '). getElementsByTagName (' img ') [0];
_this.onstop ();
_this.setopacity (_this.curimg, _this.minopa); _this.setopacity (O, _this.maxopa);
_this.curimg = O;
if (Isie) {
Context.style.filter = "Revealtrans ()";
_THIS.TRANSFX (context);
}
Context.setattribute (' src ', o.getattribute (' src '));
Decide whether to switch automatically
if (!! This.auto) {
var len = this.coll.length;
_this.timer = settimeout (function () {
_this.index < Len? _this.index++: _this.index = 1;
_this.onstart ($ (_this.cid). getElementsByTagName (' img ') [_this.index-1]);
}, This.pause);
}
},
Filter Demo
Transfx:function (O) {
With (O.filters.revealtrans) {
Transition = parseint (this.transition, 10); Duration = parsefloat (this.duration); Apply (); Play ();
}
},
Clear Time stamp
Onstop:function () {
Clearinterval (This.timer);
}
};
</script>
<body>
<div id= "Container" >
<div id= "Context" ></div>
<ul id= "NAV" ></ul>
</div>
<script>
var Revealtrans = new Revealtrans (' Nav ', {coll:[' 1.jpg ', ' 2.jpg ', ' 3.jpg ', ' 4.jpg ', ' 5.jpg ', ' 6.jpg ', ' 7.jpg ', ' 8.jpg '), ' 9.jpg ', ' 10.jpg ']};
</script>
</body>