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 相关文章推荐
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
jquery append与appendTo方法比较
May 24 jQuery
详解vue express启动数据服务
Jul 05 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 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
微信API接口大全
2015/04/15 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
Python动态加载模块的3种方法
2014/11/22 Python
Python多线程编程(五):死锁的形成
2015/04/05 Python
python爬取个性签名的方法
2018/06/17 Python
Python 打印中文字符的三种方法
2018/08/14 Python
使用Django清空数据库并重新生成
2020/04/03 Python
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
商务英语专业自荐信
2013/10/14 职场文书
会计试用期自我评价
2014/09/19 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
《观潮》教学反思
2016/02/17 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python