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 相关文章推荐
List Installed Software Features
Jun 11 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
vue实现表格合并功能
Dec 01 Vue.js
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创建PDF中文文档
2006/10/09 PHP
十天学会php之第四天
2006/10/09 PHP
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
python正则表达式实例代码
2020/03/03 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
委托公证书范本
2014/04/03 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
2014年村委会工作总结
2014/11/24 职场文书
党员转正申请报告
2015/05/15 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
详解Django的MVT设计模式
2021/04/29 Python