<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 fades in and out simply banner , asynchronous image text effect switch image effects </title>
<meta name="keywords" content=" Diluted version banner, Diluted version banner">
<meta name="description" content=" Fade in and out conciseness 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 jas black ; 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 jas black ; 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: Christine fan & Jingwen tsang, millennium </h3>
<p> Christine fan & Jingwen tsang, millennium MV Premiere! The lyrics especially invite the noun person ge dahe to make a knife, continue the concept of "a day is like a thousand years", the transformation in love is can pull each other's missing very long, every second of miss can be like a thousand years of spread. And a thousand years of waiting, also because of a second precious encounter and meaningful 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 ( Priscilla Ahn ) and sodagreen's new single It Began With A Fallen Leaf " MV Premiere! The Priscilla of dress of dress of dress of a white chiffon is placed in the forest, red hair green peak is like to break into the spirit of lively piquant in the forest accidentally, encountered the fairy in the forest. The song, composed by wu qingfeng and written by Priscilla and wu qingfeng, describes the yearning for a friend we will never see again. </p>
</span>
</a>
</div>
<div class='col'>
<a href='javascript:;' >
<img src='./bzbanner/14.jpg' width=100% />
<span>
<h3> Premiere: true or false </h3>
<p> After eight years in the world, tao jingying's new album entitled "true and false" MV Official premiere ! The song by jay Chou + Lin xi two big talent in the music world work together, sing a lot of true and false phenomena and contradictions in the love between men and women, MV Directed by liao, sometimes like a fantasy fairy tale and sometimes like a brilliant palace scene layout also true or false unreal real, realistic 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 not sleeping, sleepwalking to here. In Aaron's birthday this day ushered in a shining [pocket · yanyan]! Here's a fresh infographic It's a platform for hooking up. Yams exclusive, for each lovely pudding to commemorate eternity, everything about abramovich's love is here, here In the world only see you, quickly put ABU into the pocket, I wish Aaron 1120 Happy birthday! Android Version and IOS Jailbreak goes live... </p>
</span>
</a>
</div>
</div>
<div class='btn'><i></i><i></i><i></i><i></i></div>
<a class='pre' href='javascript:;' title=' On one piece ' ></a>
<a class='next' href='javascript:;' title=' The 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">
var benzi = {
bzBanner : function(){
//Parameter all initialized (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, set zindex for all individual objects, and show and hide
//Col: all content objects
//Pre: the last object
//Now: the object 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, returning the previous display and the current display
//Now: the currently selected index
//-------------------
var increase = function( now ){
var pre = now ,now = pre + 1;
if( now >= values.cols.length ) now = 0;
return { pre:pre ,now:now };
}
//Decreasing 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 );
}
//Small button events are linked. If there is a small button in the initialization, it is executed. Otherwise, it is not 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 switch
//Aspect: direction, 0 or no value is backward, 1 is forward
//----------------------
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 targeted, need 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').css({ opacity:0 }).eq( now ).stop(true).delay(500).animate({ opacity:1 },500);
values.cols.find('p').css({ opacity:0 }).eq( now ).stop(true).delay(1000).animate({ opacity:1 },500);
}
//The frame size
//-------------------------------
$(window).resize(function(){
values.container.height( values.cols.find('img').height() );
}).resize();
//Autoplay, the degrees method takes the corresponding parameter, changes the style of the little button (if any), and then refreshes the global variable values.now
//Time: delay time
//---------------------
var loop,play = function( time ){
clearTimeout( loop );
loop = setTimeout(function(){
change();
play( 3000 );
}, time );
}
//Pause and trigger autoplay
//---------------------
var control = function(){
values.container.hover(function(){
clearTimeout( loop );
},function(){
play( 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 ) shortcut();
btnStyle( now );
text( now );
play( 4000 );
control();
}
//Initialize the 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>