<! Doctype HTML>
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> image switching effect </title>
<SCRIPT>
/*!
* Revealtrans
* Copyright (c) 2010 cloudgamer
* Blog: http://cloudgamer.cnblogs.com/
* Date: 2008-5-23
*/
VaR isie = (document. All )? True: false; // true if IE has an element; otherwise, false.
VaR $ = function (ID ){
Return "string" = typeof ID? Document. getelementbyid (ID): ID;
};
VaR class = {
Create: function (){
Return function () {This. Initialize. Apply (this, arguments );}
}
}
VaR extend = function (destination, source ){
For (VAR property in source ){
Destination [property] = source [property];
}
}
VaR bind = function (object, fun ){
Return function (){
Return fun. Apply (object, arguments );
}
}
VaR each = function (list, fun ){
For (VAR I = 0, Len = List. length; I <Len; I ++) {fun (list [I], I );}
};
// Ie only
VaR revealtrans = Class. Create ();
Revealtrans. Prototype = {
Initialize: function (container, options ){
This. _ IMG = Document. createelement ("IMG ");
This. _ A = Document. createelement ("");
This. _ timer = NULL; // Timer
This. Index = 0; // display the index
This. _ onindex =-1; // current index
This. setoptions (options );
This. Auto = !! This. Options. Auto;
This. Pause = math. Abs (this. Options. Pause );
This. Duration = math. Abs (this. Options. duration );
This. Transition = parseint (this. Options. Transition );
This. List = This. Options. List;
This. onshow = This. Options. onshow;
// Initialize the display area
This. _ IMG. style. Visibility = "hidden"; // The red X chart is not displayed during the first conversion.
This. _ IMG. style. width = This. _ IMG. style. Height = "100%"; this. _ IMG. style. Border = 0;
This. _ IMG. onmouseover = BIND (this, this. Stop );
This. _ IMG. onmouseout = BIND (this, this. Start );
Isie & (this. _ IMG. style. Filter = "revealtrans ()");
This._a.tar get = "_ blank ";
$ (Container). appendchild (this. _ A). appendchild (this. _ IMG );
},
// Set the default attribute
Setoptions: function (options ){
This. Options = {// Default Value
Auto: True, // whether to automatically switch
Pause: 1000, // pause time (subtle)
Duration: 1, // transformation duration (seconds)
Transition: 23, // transformation effect (23 is random)
List: [], // data set. If this parameter is not set, you can add it using the add method.
Onshow: function () {}// executed during conversion
};
Extend (this. Options, options || {});
},
Start: function (){
Cleartimeout (this. _ timer );
// Return if no data exists
If (! This. List. Length) return;
// Modify the index
If (this. index <0 | this. index> = This. List. Length) {This. Index = 0 ;}
// Set display if the current index is not a display Index
If (this. _ onindex! = This. Index) {This. _ onindex = This. Index; this. Show (this. list [This. Index]);}
// If You Want To automatically switch
If (this. Auto ){
This. _ timer = setTimeout (BIND (this, function () {This. index ++; this. start () ;}), this. duration* 1000 + this. pause );
}
},
// Display
Show: function (list ){
If (isie ){
// Set the conversion Parameters
With (this. _ IMG. Filters. revealtrans ){
Transition = This. Transition; duration = This. duration; apply (); play ();
}
}
This. _ IMG. style. Visibility = "";
// Set image attributes
This. _ IMG. src = List. IMG; this. _ IMG. Alt = List. text;
// Set the link
!! List ["url"]? (This. _ A. href = list ["url"]): This. _ A. removeattribute ("href ");
// Additional functions
This. onshow ();
},
// Add a transformation object
Add: function (siimg, stext, Surl ){
This. List. Push ({IMG: siimg, text: stext, URL: Surl });
},
// Stop
Stop: function (){
Cleartimeout (this. _ timer );
}
};
</SCRIPT>
</Head>
<Body>
<Style type = "text/CSS">
. Container {
Width: 280px;
Height: 200px;
Border: 1px solid # Eee;
Position: relative;
}
# Idpictext {
Background: # Eee;
Line-Height: 25px;
Text-align: center;
Font-weight: bold;
Width: 282px;
White-space: nowrap;
Overflow: hidden;
Font-size: 12px;
}
# Idpictext {
Text-Decoration: none;
Color: #333;
Display: block;
}
# Idpiclist IMG {
Cursor: pointer;
Width: 65px;
Height: 50px;
Filter: alpha (opacity = 50 );
-Moz-opacity:. 5;
Opacity:. 5;
Border: 0;
Margin: 10px;
}
# Idpiclist IMG. On {
Filter: alpha (opacity = 100 );
-Moz-opacity: 1;
Opacity: 1;
}
# Idnum {position: absolute; Right: 5px; bottom: 5px ;}
# Idnum Li {
Float: left;
List-style: none;
Color: # FFF;
Text-align: center;
Line-Height: 16px;
Width: 16px;
Height: 16px;
Font-family: Arial;
Font-size: 12px;
Cursor: pointer;
Margin: 1px;
Border: 1px solid #707070;
Background-color: # 060a0b;
}
# Idnum Li. On {
Line-Height: 18px;
Width: 18px;
Height: 18px;
Font-size: 14px;
Border: 0;
Background-color: # ce0609;
Font-weight: bold;
}
</Style>
<Div id = "idshow" class = "Container">
</Div>
<Div id = "idpicshow" class = "Container">
<Ul id = "idnum">
</Ul>
</Div>
<Div id = "idpictext"> </div>
<Div id = "idpiclist"> </div>
<SCRIPT>
VaR r = new revealtrans ("idshow ");
// Add a transformation object
R. Add ('HTTP: // effect, 'image transform effect', 'HTTP: // www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html ');
R. Add ('HTTP: // effect, 'image sliding display effect', 'HTTP: // www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html ');
R. Add ('HTTP: // effect, 'image switching display effect', 'HTTP: // www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html ');
R. Start ();
//////////////////////
VaR RVT = new revealtrans ("idpicshow ");
// Add a transformation object
RVt. Add ('HTTP: // transform, 'image transform effect', 'HTTP: // www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html ');
RVt. Add ('HTTP: // effect, 'image sliding display effect', 'HTTP: // www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html ');
RVt. Add ('HTTP: // effect, 'image switching display effect', 'HTTP: // www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html ');
VaR olist = $ ("idpiclist"), otext = $ ("idpictext"), arrimg = [];
VaR onum = $ ("idnum"), arrnum = [];
// Set the image list
Each (RVt. List, function (list, I ){
// Image
VaR IMG = Document. createelement ("IMG ");
IMG. src = list ["IMG"]; IMG. Alt = list ["text"];
Arrimg [I] = IMG;
Olist. appendchild (IMG );
// Click the button
VaR li = Document. createelement ("Li ");
Li. innerhtml = I + 1;
Arrnum [I] = Li;
Onum. appendchild (LI );
// Event settings
IMG. onmouseover = Li. onmouseover = function () {RVT. Auto = false; RVT. Index = I; RVT. Start ();};
IMG. onmouseout = Li. onmouseout = function () {RVT. Auto = true; RVT. Start ();};
});
// Set the text display area of the image list Style
RVt. onshow = function (){
VaR I = This. index, list = This. list [I];
// Image
Each (arrimg, function (o) {o. classname = "" ;}); arrimg [I]. classname = "on ";
// Click the button
Each (arrnum, function (o) {o. classname = "" ;}); arrnum [I]. classname = "on ";
// Text area
Otext. innerhtml = !! List. url? "<A href = '" + list. url + "'target =' _ blank '>" + list. Text + "</a>": List. text;
}
// Text display area
Otext. onmouseover = function () {RVT. Auto = false; RVT. Stop ();};
Otext. onmouseout = function () {RVT. Auto = true; RVT. Start ();};
RVt. Start ();
</SCRIPT>
<Br/>
<SCRIPT type = "text/JavaScript"> <! --
Google_ad_client = "ca-pub-0342339836871729 ";
/* 728x90, created in 10-1-26 */
Google_ad_slot = "8648094726 ";
Google_ad_width = 728;
Google_ad_height = 90;
// -->
</SCRIPT>
<SCRIPT type = "text/JavaScript"
Src = "http://pagead2.googlesyndication.com/pagead/show_ads.js">
</SCRIPT>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
