Home > Developer > JavaScript
Copy codeThe Code is as follows:
<Pre code_snippet_id = "280064" snippet_file_name = "blog_20140408_00008982765" name = "code" class = "html"> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta charset = 'utf-8'/>
<Title> full-screen fade-in and fade-out, simple banner, asynchronous image text effect switching, image effects </title>
<Meta name = "keywords" content = "diluted banner, diluted banner">
<Meta name = "description" content = "fade in and fade out simple banner"/>
<Style type = "text/css">
Body, ul, li, ol {list-style: none; padding: 0px; margin: 0px; font-size: 12px ;}
Img {border: 0px ;}
. BzBanner {width: 100%; min-width: 980px; height: auto; overflow: hidden; position: relative ;}
. BzBanner. content,. bzBanner. col,. bzBanner. col a {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px ;}
. BzBanner. btn {position: absolute; bottom: 25px; right: 50px; z-index: 5 ;}
. BzBanner. btn I {display: block; float: left; width: 15px; height: 15px; padding: 0 5px; border-radius: 15px; margin-left: 15px; background: white; overflow: hidden; opacity: 0.4; filter: alpha (opacity = 40); cursor: pointer ;}
. BzBanner. btn I: hover {background: #9C0 ;}
. BzBanner. btn I. act {opacity: 0.8; filter: alpha (opacity = 80); background: #9C0 ;}
. BzBanner. pre ,. bzBanner. next {display: inline-block; width: 72px; height: 72px; background: url (. /bzbanner/btn.png) no-repeat; position: absolute; top: 50%; margin-top:-50px; z-index: 3 ;}
. BzBanner. pre {left: 30px ;}
. BzBanner. next {right: 30px; background-position: 0-72px ;}
. BzBanner. pre: hover {background-position: 0-144px ;}
. BzBanner. next: hover {background-position: 0-216px ;}
. BzBanner. col a {color: white ;}
. BzBanner. col span {display: inline-block; width: 550px; height: 200px; background: rgba (0, 0, 0 ,. 1); position: absolute; z-index: 3; bottom: 70px; left: 130px ;}
. BzBanner. col span h3 {font-weight: normal; font-size: 28px; font-weight: normal; font-family:; padding: 0px; margin: 0px; padding-left: 20px; line-height: 70px; text-shadow: 1px 1px rgba (0, 0, 0 ,. 3 );}
. BzBanner. col span p {display: inline-block; width: 90%; line-height: 25px; font-size: 14px; font-family:; margin: 0px; padding: 0px; padding-left: 20px; text-shadow: 1px 1px rgba (0, 0, 0 ,. 3 );}
</Style>
</Head>
<Body>
<Div class = 'bzbanner '>
<Div class = 'content'>
<Div class = 'col'>
<A href = 'javascript:; '>
<Span>
<H3> exclusive premiere: Fan Xiaoqi & Zeng Jingyu Millennium <P> fan Xiaoqi and Zeng Jingyu's music video broadcast for the millennium! The lyrics are especially important to the noun, GE da, to operate on the knife and continue the concept of "one day for thousands of years". In love, the opposite person's thoughts can be pulled for a long time, every second of Miss can be like one thousand years of spread. And one thousand years of waiting, also because of a second of love and love. </P>
</Span>
</A>
</Div>
<Div class = 'col'>
<A href = 'javascript:; '>
<Span>
<H3> exclusive premiere: It Began With A Fallen Leaf <P> Priscilla Ahn and the music premiere of the new "It Began With A Fallen Leaf" song by Soda Green! Prisiya, a white chiffon dress, is in the forest, and the red hair and green peaks may have accidentally intruded into the forest's lively and naughty genie, encountering the fairy in the forest. The song was composed by Wu Qingfeng and co-authored by prisiya and Wu Qingfeng, describing the thoughts of a friend who can no longer meet each other. </P>
</Span>
</A>
</Div>
<Div class = 'col'>
<A href = 'javascript:; '>
<Span>
<H3> premiere: authentic and false <P> in eight years, Tao jingying's new album named "True or false" debuted the MV official version! The song was jointly developed by Jay Chou and Lin Xi, two talented people in the music field, singing many true and false phenomena and contradictions in love between men and women. The music video was directed by Liao Renyi, sometimes it's like a fantasy fairy tale, and sometimes it's like a brilliant palace scene! </P>
</Span>
</A>
</Div>
<Div class = 'col'>
<A href = 'javascript:; '>
<Span>
<H3> pocket-FAN puts your idol in your pocket <P> sleep. On the day of Aaron's birthday, there was a shining [pocket Yarun ]! There are fresh information and images, which are used to hook up the communication platform. Yarun exclusive, to commemorate the eternal for every lovely pudding, all about ABBA love is here, here the world only sees you, put Abab into the pocket, I wish Yarun 1120 Happy Birthday! Android and IOS jailbreak versions are available first... </P>
</Span>
</A>
</Div>
</Div>
<Div class = 'btn '> <I> </div>
<A class = 'pre' href = 'javascript:; 'title = 'previous login'> </a>
<A class = 'Next' href = 'javascript:; 'title = 'Next'> </a>
</Div>
<Script type = "text/javascript" src = "./jquery-1.10.2.min.js"> </script>
<Script type = "text/javascript" src = "./bzBanner. min. js"> </script>
<Script type = "text/javascript">
$ (Function () {benzi. bzBanner ();});
</Script>
</Body>
</Html> </pre>
<Pre> </pre>
<Pre code_snippet_id = "280064" snippet_file_name = "feature" name = "code" class = "html"> ---------- html Parser </pre> <pre code_snippet_id = "280064" snippet_file_name =" authorization "name =" code "class =" html "> <pre code_snippet_id =" 280064 "snippet_file_name =" blog_20140408_2_455436 "name =" code "class =" javascript ">/* = ======================================
@ Title: deprecated banner with title + description and small buttons
@ Time: 2013.11.22
@ Source: BENZI. PW
@ Description:
Plugin usage:
Complete css html copying before use.
Benzi. bzBanner ();
All object calls are modified in js.
Container: exclusive Frame
Cols: All Content
Btns: all small buttons
Act: name of the button activation Style
Pre: forward button
Next: Flip button
==== */
Var benzi = {
BzBanner: function (){
// All parameter initialization (will be deleted after encapsulation)
Var values = {
Container: $ ('. bzBanner '),
Cols: $ ('. bzBanner. col '),
Btns: $ ('. bzBanner. btn I '),
Act: 'ac ',
Pre: $ ('. bzBanner. pre '),
Next: $ ('. bzBanner. next '),
Now: 0
}
// Fade effect, set zindex of all individual objects, and display and hide
// Col: All content objects
// Pre: the previous object
// Now: the currently displayed object
//-----------------------
Var weaken = function (pre, now ){
Var col = values. cols;
Col.css ({zIndex: 1}). eq (pre 2.16.css ({zIndex: 2 });
Col. eq (now 2.16.css ({zIndex: 3, opacity: 0}). stop (true). animate ({opacity: 1}, 700 );
}
// Calculates progressively, returns the previous display content and the content to be displayed.
// Now: the selected index
//-------------------
Var increase = function (now ){
Var pre = now, now = pre + 1;
If (now> = values. cols. length) now = 0;
Return {pre: pre, now: now };
}
// Descending Calculation
//-------------------
Var degression = function (now ){
Var pre = now, now = pre-1;
If (now <0) now = values. cols. length-1;
Return {pre: pre, now: now };
}
// Modify the small button style
//---------------------
Var btnStyle = function (now ){
If (values. btns & values. act)
Values. btns. removeClass (values. act). eq (now). addClass (values. act );
}
// The small button event is mounted. If there is a small button in the initialization, It will be executed; otherwise, it will not be executed.
//----------------------
Var button = function (){
Values. btns. click (function (){
Var now = $ (this). index ();
If (values. now! = Now ){
Weaken (values. now, now );
BtnStyle (now );
Text (now );
Values. now = now;
}
});
}
// Content Switching
// Aspect: direction. 0 or no value indicates backward flip, and 1 indicates forward flip.
//----------------------
Var change = function (aspect ){
Var val = aspect? Degression (values. now): increase (values. now );
Weaken (val. pre, val. now );
BtnStyle (val. now );
Text (val. now );
Values. now = val. now;
}
// Left/right button Effect
//-----------------------
Var shortcut = function (){
Values. pre. click (function () {change (1 );});
Values. next. click (function () {change ();});
}
// Text switching effect. This effect is targeted and requires style support.
//------------------------
Var text = function (now ){
Values.cols.find('span'}.css ({opacity: 0}). eq (now). stop (true). delay (500). animate ({opacity: 1}, 1000 );
Values.cols.find('h3'hangzhou.css ({opacity: 0}). eq (now). stop (true). delay (500). animate ({opacity: 1}, 500 );
Values.cols.find('p'hangzhou.css ({opacity: 0}). eq (now). stop (true). delay (1000). animate ({opacity: 1}, 500 );
}
// Frame size
//-------------------------------
$ (Window). resize (function (){
Values. container. height (values. cols. find ('img '). height ());
}). Resize ();
// Automatic playback. The degrees method obtains the corresponding parameters, modifies the small button style (if there is a small button), and refresh the global variable values. now.
// Time: Delay time
//---------------------
Var loop, play = function (time ){
ClearTimeout (loop );
Loop = setTimeout (function (){
Change ();
Play (1, 3000 );
}, Time );
}
// Pause and trigger automatic playback
//---------------------
Var control = function (){
Values. container. hover (function (){
ClearTimeout (loop );
}, Function (){
Play (1, 2000 );
});
}
// Initialize the effect and call each function
//--------------------
Var initialize = function (){
Var now = values. now;
Weaken (values. cols. length-1, now );
If (values. btns) button ();
If (values. pre & values. next) then cut ();
BtnStyle (now );
Text (now );
Play (1, 4000 );
Control ();
}
// Initialization call
//---------------------
Initialize ();
}
}
</Pre> <br>
<Br>
<Pre> </pre>
<Pre code_snippet_id = "280064" snippet_file_name = "external" name = "code" class = "html"> </pre> <pre code_snippet_id = "280064" snippet_file_name = "external" name = "code" class = "html"> </pre>
<P> </p>
<Pre> </pre>
</Pre>
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
