jquery淡化版banner异步图片文字效果切换图片特效

复制代码代码如下:

　　<head>

　　<title>全屏淡入淡出简洁banner，异步图片文字效果切换图片特效</title>

　　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>

　　<span>

　　<p>范玮琪&曾静玟《千年》MV首播！歌词特别力邀名词人葛大為操刀，延续“一日如千年”的概念，转换在爱情里就是可以把对方的思念拉得很长，每一秒的想念都可以像是一千年的蔓延。而一千年的等待，也因为一秒钟的珍爱相遇而有了意义爱情。</p>

　　</span>

　　</a>

　　</div>

　　<span>

　　<h3>独家首播：It Began With A Fallen Leaf</h3>

　　<p>普莉西雅（Priscilla Ahn）和苏打绿全新单曲《It Began With A Fallen Leaf》MV首播！一袭白色雪纺洋装的普莉西雅置身于森林中，红发青峰似偶然闯入森林中活泼调皮的精灵，邂逅了森林中的仙女。歌曲由吴青峰作曲，普莉西雅和吴青峰共同作词，描述了对一位再也无法相见的好友的思念之情。</p>

　　</span>

　　</a>

　　</div>

　　<span>

　　<p>暌违乐坛八年陶晶莹新专辑同名主打《真的假的》MV官方版首播!歌曲由周杰伦＋林夕两位乐坛大才子携手合作，唱出男女情爱中许多真真假假的现象和矛盾，MV由廖人帥执导，时而如梦幻童话时而如辉煌宫殿的场景布置亦真亦假似幻似真，逼真特技效果十足！</p>

　　</span>

　　</a>

　　</div>

　　<span>

　　<h3>口袋·FAN 把你的偶像装进口袋里</h3>

　　<p>睡不着过后，梦游到这里。在亚纶生日的这一天迎来闪闪发亮的【口袋·炎亚纶】！这里有新鲜资讯影像，是勾搭交流平台。是炎亚纶专属，为每一个可爱的布丁纪念永恒，关于阿布有爱的一切都在这里，在这里全世界只看见你，快把阿布装进口袋，祝炎亚纶1120生日快乐！Android版和IOS越狱版抢先上线…</p>

　　</span>

　　</a>

　　</div>

　　</div>

　　$(function(){ benzi.bzBanner(); });

　　</script>

　　</body>

　　</html></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">/*==================================

　　@标题：淡化版banner 带标题+描述和小按钮

　　@时间：2013.11.22

　　@来源：BENZI.PW

　　@描述:

　　插件使用方式:

　　使用前请将 CSS HTML 完整的复制。

　　benzi.bzBanner();

　　对象调用全部在js内改动

　　container：最外框

　　cols：全部内容

　　btns：全部小按钮

　　act：按钮激活样式名

　　pre：向前翻按钮

　　next：向后翻按钮

　　====*/

　　var benzi = {

　　bzBanner : function(){

　　//参数所有初始化（封装后将删除）

　　var values = {

　　container:$('.bzBanner'),

　　cols:$('.bzBanner .col'),

　　btns:$('.bzBanner .btn i'),

　　act:'act',

　　pre:$('.bzBanner .pre'),

　　next:$('.bzBanner .next'),

　　now:0

　　}

　　//淡化效果，设置所有单个对象的 zindex，以及显示和隐藏

　　// col：所有内容对象

　　// pre：上一个对象

　　// now：当前显示的对象

　　//-----------------------

　　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);

　　}

　　//递增计算，返回前一个显示内容和当前要显示的内容

　　// now：当前已经选择的索引

　　//-------------------

　　var increase = function( now ){

　　var pre = now ,now = pre + 1;

　　if( now >= values.cols.length ) now = 0;

　　return { pre:pre ,now:now };

　　}

　　//递减计算

　　//-------------------

　　var degression = function( now ){

　　var pre = now ,now = pre - 1;

　　if( now < 0 ) now = values.cols.length-1;

　　return { pre:pre ,now:now };

　　}

　　//修改小按钮样式

　　//---------------------

　　var btnStyle = function( now ){

　　if( values.btns && values.act )

　　values.btns.removeClass( values.act ).eq( now ).addClass( values.act );

　　}

　　//小按钮事件挂接，初始化里如果有小按钮则执行，否则不执行

　　//----------------------

　　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;

　　}

　　});

　　}

　　//内容切换

　　// aspect：方向，0 或无值是后翻，1 是前翻

　　//----------------------

　　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;

　　}

　　//左右按钮效果

　　//-----------------------

　　var shortcut = function(){

　　values.pre.click(function(){ change(1); });

　　values.next.click(function(){ change(); });

　　}

　　//文字切换效果，此效果很有针对性，需要样式支持

　　//------------------------

　　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);

　　}

　　//框架尺寸

　　//-------------------------------

　　$(window).resize(function(){

　　values.container.height( values.cols.find('img').height() );

　　}).resize();

　　// 自动播放，degrees 方法获取对应参数，并且修改小按钮样式（如果有小按钮的话），然后刷新全局变量 values.now

　　// time: 延时时间

　　//---------------------

　　var loop,play = function( time ){

　　clearTimeout( loop );

　　loop = setTimeout(function(){

　　change();

　　play( 3000 );

　　}, time );

　　}

　　//暂停和触发自动播放

　　//---------------------

　　var control = function(){

　　values.container.hover(function(){

　　clearTimeout( loop );

　　},function(){

　　play( 2000 );

　　});

　　}

　　//初始化效果，调用各个函数

　　//--------------------

　　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();

　　}

　　</pre><br>

　　<br>

　　<p></p>

　　</pre>

教程首页更多教程