<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 ">
<meta charset= ' Utf-8 '/>
<title> Full-screen Fade Concise banner, asynchronous picture text effect toggle Picture Effects </title>
<meta name= "keywords" content= "Fade Edition banner, Fade edition banner" >
<meta name= "description" content= "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: Microsoft Ya-hei; padding:0px; margin:0 px 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>
<body>
<div class= ' Bzbanner ' >
<div class= ' content ' >
<div class= ' col ' >
<a href= ' javascript:; ' >
<span>
<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:; ' >
<span>
<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:; ' >
<span>
<p> against the music scene eight years pottery Crystal new album title "True False" MV official version of the premiere! The song by Jay Chou + Lin Xi two music great talent work together to sing the love of men and women many true and 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:; ' >
<span>
<p> after sleep, sleepwalking to 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 inflammation of 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 Abu into pocket, Ceratia LUN 1120 Happy Birthday! Android version and iOS jailbreak version of the first online ...</p>
</span>
</a>
</div>
</div>
<div class= ' btn ' ><i></i><i></i><i></i><i></i></div>
<a class= ' pre ' href= ' javascript:; ' title= ' previous ' ></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>
<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 = "280064" snippet_file_name= "blog_20140408_2_455436" name= "code" class= "JavaScript" >/*======================== ==========
@ Title: Fade Version Banner with caption + Description and small button
@ Time: 2013.11.22
@ Source: BENZI.PW
Description
How to use the plug-in:
Please copy the CSS HTML completely before using.
Benzi.bzbanner ();
Object calls are all changed in JS
Container: the most outer frame
COLS: All content
Btns: All small buttons
Act: Button activates style name
Pre: Flip Forward button
Next: Flip the button back
====*/
var Benzi = {
Bzbanner:function () {
Parameter All initialization (will be deleted after encapsulation)
var values = {
container:$ ('. Bzbanner '),
cols:$ ('. Bzbanner. Col '),
btns:$ ('. Bzbanner. btn i '),
Act: ' act ',
pre:$ ('. Bzbanner. Pre '),
next:$ ('. Bzbanner. Next '),
now:0
}
Fade effects, set the zindex of 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);
}
Increments the calculation to return the previous display and what is currently being displayed
Now: Indexes that are currently selected
//-------------------
var increase = function (now) {
var pre = Now, now = pre + 1;
if (now >= values.cols.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 a small button style
//---------------------
var Btnstyle = function (now) {
if (Values.btns && values.act)
Values.btns.removeClass (values.act). EQ (now) addclass (values.act);
}
Small button Event hook, initialization if a small button is executed, otherwise do not
//----------------------
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 is turned back, 1 is the front 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 and right button effect
//-----------------------
var shortcut = function () {
Values.pre.click (function () {change (1);});
Values.next.click (function () {change ();});
}
Text switching effect, this effect is very specific, requires style support
//------------------------
var text = function (now) {
Values.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 size
//-------------------------------
$ (window). Resize (function () {
Values.container.height (Values.cols.find (' img '). Height ());
}). Resize ();
AutoPlay, the Degrees method gets the corresponding parameter, modifies the small button style (if there is a small button), and then refreshes the global variable Values.now
Time: Delay
//---------------------
var loop,play = function (time) {
Cleartimeout (loop);
loop = settimeout (function () {
Change ();
Play (3000);
}, time);
}
Pausing and triggering autoplay
//---------------------
var control = function () {
Values.container.hover (function () {
Cleartimeout (loop);
},function () {
Play (2000);
});
}
Initialize effects, calling individual functions
//--------------------
var initialize = function () {
var now = Values.now;
Weaken (values.cols.length-1, now);
if (values.btns) button ();
if (Values.pre && values.next) shortcut ();
Btnstyle (now);
Text (now);
Play (4000);
Control ();
}
Initialization call
//---------------------
Initialize ();
}
}
</pre><br>
<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>
