Full screen fade in simple banner, asynchronous picture text effects toggle picture effects, need friends can refer to the following
Code as follows: <pre code_snippet_id= "280064" snippet_file_name= "blog_20140408_1_8982765" 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 out concise banner, asynchronous picture text effect toggle picture effects </title> <meta name= "keywords" content= " Fade version banner, fade version banner "> <meta name=" description "content=" Fade in 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 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: Microsoft Ya-hei; 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: Microsoft Ya-hei; 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:; ' > <img src= '. Bzbanner/12.jpg ' width=100%/> <span> <h3> exclusive premiere: Fanfan Qi & Zeng "Millennium" </h3> <p > Fanfan & Zeng "Thousand Years" MV Premiere! Lyrics Special force to invite the noun of GE da for fencing, continuation of "one Day like the Millennium" concept, the conversion in love is to be able to pull each other's thoughts long, every second miss can be like 1000 years of spread. and 1000 years of waiting, but also because a second treasure meet and have a sense of love. </p> </span> </a> </div> <div class= ' col ' > <a href= ' javascript:; ' > <img src= './bzbanner/13.jpg ' width=100%/> <span> <h3> Exclusive Premiere: It began with A fallen leaf</h3> <p> Priscilla Alicia (Priscilla Ahn) and Soda Green new single "it Began with A fallen Leaf MV Premiere! A white chiffon dress Priscilla Alicia Exposure in the forest, red hair like a chance to break into the forest lively naughty elves, met the Forest fairy. Song by Wu composition, Priscilla Alicia and Wu lyrics, described to a friend can no longer meet the missing feeling. </p> </span> </a> </div> <div class= ' col ' > <a href= ' javascript:; ' > <img src= './bzbanner/14.jpg ' width=100%/> <span> <h3> premiere: Really fake </h3> <p> against the music scene eight years pottery Crystal new album of the same title "real Fake" MV official version of the premiere! The song by Jay Chou + Lin Xi two music great talent to work together, sing the love of many true and false false phenomenon and contradictions, MV by Liao Handsome directed, Sometimes, such as fantasy fairy tales, such as the scene of the magnificent palace layout is also true and false like illusion true, lifelike special effects full! </p> </span> </a> </div> <div class= ' col ' > <a href= ' javascript:; ' > <img src= './bzbanner/15.jpg ' width=100%/> <span> <h3> Pocket · FAN put your idol in your pocket </h3> <p> after sleep, sleepwalking here. In the day of the Aaron's birthday ushered in the shiny "pockets of inflammation of Aaron"! Here is a new information image, is hooking up the Exchange platform. Is phlogistic the exclusive, for every lovely pudding to commemorate the eternal, about Abu has love everything here, here all over the world only see you, quickly put Roman Abramovich into a pocket, wishHappy 1120 birthday to Aaron! Android version and iOS jailbreak version preemptive ...</p> </span> </a> </div> </div> <div class= ' btn ' ><i></i><i></i><i></i><i></i></div> <a class= ' pre ' href= ' javascript:; ' title= ' on a ' ></a> <a ' next ' class= ' 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= "blog_20140408_2_455436" name= "code" class= "HTML" >---------- HTML---------------------------------------------------------------------------------</pre><pre Code_ snIppet_id= "280064" snippet_file_name= "blog_20140408_2_455436" name= "code" class= "HTML" ><pre code_snippet_id= " 280064 "Snippet_file_name=" blog_20140408_2_455436 "name=" code "class=" JavaScript ">/*========================== ======== @ title: Fade version Banner with title + Description and small button @ time:2013.11.22 @ Source:benzi.pw @ Description: Plug-in usage: Please copy the CSS HTML completely before using. Benzi.bzbanner (); object invoke all changes in JS container: Most outer frame COLS: All content BTNS: all small button Act: button-activated style name PRE: Flip Forward button Next: Flip Back button ====*/ var Benzi = { bzbanner:function () {&N Bsp //parameter All initialization (after encapsulation will be deleted) var values = { container:$ ('. Bzbanner '), cols:$ ('. Bzbanner. Col '), btns:$ (' Bzbanner. btn i '), Act: ' act ', pre:$ ('. Bzbanner. Pre '), next:$ ('. Bzbanner. Next '), now :0 } //Fade effect, set zindex for all individual objects, and show and hide //col: All Content objects //Pre: Previous object //Now: Objects currently displayed //----------------------- var WEAKen = function (Pre,now) { var col = values.cols; col.css ({zindex:1}). EQ (PRE). css ({zindex:2}); col . EQ (now). CSS ({zindex:3,opacity:0}). Stop (true). Animate ({opacity:1},700); } //incremental calculation, returns the previous display and what is currently being displayed //Now: Index currently selected //- ------------------ var increase = function (now) { var pre = now, now = pre + 1; if (now >= values.co Ls.length) now = 0; return {pre:pre, now:now}; } //Decrement 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 small button style //--------------------- var btnstyle = function ( Now) { if (values.btns && values.act) Values.btns.removeClass (values.act). EQ (now). AddClass (value s.act); } //Small button event hook, initialization if a small button is executed, otherwise do not execute //---------------------- 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; } }); Sp //Content switching //aspect: direction, 0 or no value is rear flip, 1 is front flip //---------------------- var change = function (aspect) {&NB Sp 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 button effect //----------------------- var shortcut = function () { Values.pre.click (function () {change (1);}); Values.next.click (function () {change ();}); } /text switch effect, this effect is very specific, need style support //------------------------ var text = function (now) { V Alues.cols.find (' span '). CSS ({opacity:0}). EQ (now). Stop (true). Delay. Animate ({opacity:1},1000); values.cols.find (' H3 '). css ({opacity:0}). EQ (now). Stop (true). Delay. Animate ({opacity:1},500); values.cols.find (' P '). css ({opacity:0}). EQ (now). Stop (true). Delay (1000). Animate ({opacity:1},500); } //Frame dimensions //--------------------- ---------- $ (window). Resize (function () { values.container.height (Values.cols.find (' img '). Height ()); }). Resize (); //AutoPlay, degrees method get the corresponding parameters, and modify the small button style (if there is a small button), and then refresh the global variable values.now //time: Delay Times & nbsp --------------------- var loop,play = function (time) { cleartimeout (loop); loop = settimeout (functi On () { change (); plays (3000); }, Time); } //pause and trigger AutoPlay //-------------------- - var control = function () { values.container.hover (function () { cleartimeout (loop); },function () { play; }); } //initialization effect, calling functions //-------------------- var initialize = function () { var now = values.now; weaken (values.cols.length-1, now); if (values.btns) button (); if (Values.pre && valu Es.next) shortcut (); Btnstyle (now); -text (now); play (4000); control (); } Initialization call //--------------------- Initialize (); } } </pre><br>& nbsp <br> <pre></pre> <pre code_snippet_id= "280064" Snippet_file_name= "blog_20140408_2 _455436 "name=" code "class=" HTML "></pre><pre code_snippet_id=" 280064 "Snippet_file_name=" blog_20140408 _2_455436 "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
