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 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 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
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
python Opencv将图片转为字符画
2021/02/19 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
Yahoo的PHP面试题
2014/05/26 面试题
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
师生聚会感言
2014/01/26 职场文书
文明村创建实施方案
2014/03/27 职场文书
干部选拔任用方案
2014/05/26 职场文书
单位在职证明书
2014/09/11 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
领导干部考核评语
2015/01/04 职场文书
门店店长岗位职责
2015/04/14 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
python的html标准库
2022/04/29 Python