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


Posted in Javascript onApril 08, 2014
<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>全屏淡入淡出简洁banner,异步图片文字效果切换图片特效</title> 
<meta name="keywords" content="淡化版banner,淡化版banner"> 
<meta name="description" content="淡入淡出简洁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:;' > 
<img src='./bzbanner/12.jpg' width=100% /> 
<span> 
<h3>独家首播:范玮琪&曾静玟《千年》</h3> 
<p>范玮琪&曾静玟《千年》MV首播!歌词特别力邀名词人葛大?椴俚叮?有?耙蝗杖缜?辍钡母拍睿??辉诎?槔锞褪强梢园讯苑降乃寄罾?煤艹ぃ?恳幻氲南肽疃伎梢韵袷且磺?甑穆?印6?磺?甑牡却??惨蛭?幻胫拥恼浒?嘤龆?辛艘庖灏?椤?lt;/p> 
</span> 
</a> 
</div> 
<div class='col'> 
<a href='javascript:;' > 
<img src='./bzbanner/13.jpg' width=100% /> 
<span> 
<h3>独家首播:It Began With A Fallen Leaf</h3> 
<p>普莉西雅(Priscilla Ahn)和苏打绿全新单曲《It Began With A Fallen Leaf》MV首播!一袭白色雪纺洋装的普莉西雅置身于森林中,红发青峰似偶然闯入森林中活泼调皮的精灵,邂逅了森林中的仙女。歌曲由吴青峰作曲,普莉西雅和吴青峰共同作词,描述了对一位再也无法相见的好友的思念之情。</p> 
</span> 
</a> 
</div> 
<div class='col'> 
<a href='javascript:;' > 
<img src='./bzbanner/14.jpg' width=100% /> 
<span> 
<h3>首播:真的假的</h3> 
<p>暌违乐坛八年陶晶莹新专辑同名主打《真的假的》MV官方版首播!歌曲由周杰伦+林夕两位乐坛大才子携手合作,唱出男女情爱中许多真真假假的现象和矛盾,MV由廖人??执导,时而如梦幻童话时而如辉煌宫殿的场景布置亦真亦假似幻似真,逼真特技效果十足!</p> 
</span> 
</a> 
</div> 
<div class='col'> 
<a href='javascript:;' > 
<img src='./bzbanner/15.jpg' width=100% /> 
<span> 
<h3>口袋·FAN 把你的偶像装进口袋里</h3> 
<p>睡不着过后,梦游到这里。在亚纶生日的这一天迎来闪闪发亮的【口袋·炎亚纶】!这里有新鲜资讯影像 ,是勾搭交流平台。是炎亚纶专属,为每一个可爱的布丁纪念永恒,关于阿布有爱的一切都在这里,在这 里全世界只看见你,快把阿布装进口袋,祝炎亚纶1120生日快乐!Android版和IOS越狱版抢先上线…</p> 
</span> 
</a> 
</div> 
</div> 
<div class='btn'><i></i><i></i><i></i><i></i></div> 
<a class='pre' href='javascript:;' title='上一张' ></a> 
<a class='next' href='javascript:;' title='下一张' ></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">/*================================== 
@标题:淡化版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> 
<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>
Javascript 相关文章推荐
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
js实现文字截断功能
Sep 14 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
Canvas实现动态的雪花效果
Feb 13 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 #Javascript
javascript跨域的4种方法和原理详解
Apr 08 #Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 #Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 #Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 #Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 #Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 #Javascript
You might like
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
php自定义hash函数实例
2015/05/05 PHP
php session_decode函数用法讲解
2019/05/26 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Sublime开发python程序的示例代码
2018/01/24 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
遇到的Mysql的面试题
2014/06/29 面试题
新闻记者实习自我鉴定
2013/09/19 职场文书
大学生求职信范文应怎么写
2014/01/01 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
大学生就业策划书范文
2014/04/04 职场文书
趣味运动会标语口号
2015/12/26 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫