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

代码如下:

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

赞 (0)

相关推荐

  • jQuery随机切换图片的小例子

    复制代码 代码如下: <!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>    <title></titl

  • jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】

    jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】

    本文实例讲述了jQuery实现最简单的切换图效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>最简单的切换图</title> <!-- 兼容IE6+ 兼容火狐 兼容谷歌 兼容欧朋 --> </head> <body> <

  • 一个基于jquery的图片切换效果

    一个基于jquery的图片切换效果

    下面的代码对于学习jquery的朋友是个参考html代码: 代码 复制代码 代码如下: <div class="warp" id="warp"> <img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic1.bmp" alt="" class="imgBig" /> <img src="ht

  • jQuery+css实现的切换图片功能代码

    jQuery+css实现的切换图片功能代码

    本文实例讲述了jQuery+css实现的切换图片功能代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <script type="text/javascript" src="jquery.js"></script> <style type="t

  • 基于Jquery的简单图片切换效果

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascrip

  • Jquery实现点击切换图片并隐藏显示内容(2种方法实现)

    我们的电脑屏幕大小是固定的,那么如何在有限的空间放更多的内容呢? 我们应该给用户足够的选择权,当他们想要看某些内容的时候可以很快的看到,不想看的时候就把他隐藏.于是就有了题目说的这个问题. 其实这个问题很简单,那么,之所以拿出来跟大家分享,一方面我们大家相互交流,另一方面,也是对自己的学习的一种总结. 这里我想到了两种方法,给大家分享一下. 好了不多说,下面看代码: 第一种,是常规的方法: [javascript] 复制代码 代码如下: $(function(){ var images = ['

  • Jquery实现动态切换图片的方法

    本文实例讲述了Jquery实现动态切换图片的方法.分享给大家供大家参考.具体实现方法如下: <!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"> &

  • jQuery 一个图片切换的插件

    jQuery 一个图片切换的插件

    以下是参数说明:  参数名称  描述  delay  图片切换速度,单位毫秒  maskOpacity  遮罩层透明度,1为不透明,0为全透明  numOpacity  数字按钮透明度,1为不透明,0为全透明  maskBgColor  遮罩层背景色  textColor  标题字体颜色  numColor  数字按钮字体颜色  numBgColor  数字按钮背景色  alterColor  数字按钮选中项字体颜色  alterBgColor  数字按钮选中项背景颜色插件代码及调用 - 插件名

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

    复制代码 代码如下: <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

  • jQuery实现为控件添加水印文字效果(附源码)

    jQuery实现为控件添加水印文字效果(附源码)

    本文实例讲述了jQuery实现为控件添加水印文字效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-text-add-txt-style-codes/ 具体代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>WaterMark

  • jQuery插件multiScroll实现全屏鼠标滚动切换页面特效

    jQuery插件multiScroll实现全屏鼠标滚动切换页面特效

    经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款jQuery插件给大家,jQuery全屏鼠标滚动切换页面特效插件multiScroll.js,支持众多的参数自定义配置,scrollingSpeed:切换速度.easing:动画效果.navigation:false是否出现导航,还支持事件Callback函数调用,onLeave.afterLoad等,效果还是和不错的,浏览器兼容方面:IE8, 9, Opera 12.以及现代的浏览器,需要浏览器支持CSS3属性,推荐学习和使用. 使用方法

  • jquery动画3.创建一个带遮罩效果的图片走廊

    复制代码 代码如下: #frame { position: relative; width: 700px; height: 400px; overflow: hidden; z-index: 0; } #frame img { width: 700px; height: 400px; position: absolute; top: 0; left: 0; z-index: 1; } #frame img.visible { z-index: 2; } #frame a { display: b

  • jquery京东商城双11焦点图多图广告特效代码分享

    jquery京东商城双11焦点图多图广告特效代码分享

    本文实例讲述了jquery京东商城双11焦点图多图广告特效.分享给大家供大家参考.具体如下: jquery实现的京东商城双11焦点图多图广告滑动及自动切换动画效果源码,是一段模仿京东商城双11的焦点图代码,专业应用于网站的图片展示及重点展示的区域,该段代码实现了鼠标滑过切换图片及自动切换图片两种效果. 运行效果图:     -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jque

  • 基于Jquery制作图片文字排版预览效果附源码下载

    基于Jquery制作图片文字排版预览效果附源码下载

    基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 效果图如下所示,怎么样感兴趣吗,感兴趣的朋友继续往下学习哦. 效果演示    源码下载 html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscree

  • jQuery文字提示与图片提示效果实现方法

    jQuery文字提示与图片提示效果实现方法

    本文实例讲述了jQuery文字提示与图片提示效果实现方法.分享给大家供大家参考,具体如下: 1.效果如图: 2.文字提示代码: <script type="text/javascript"> //<![CDATA[ $(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = &q

  • jQuery实现图片文字淡入淡出效果

    jQuery实现图片文字淡入淡出效果

    本实例主要讲解了jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动效果,分享给大家供大家参考,具体内容如下 1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行. 3.

  • jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果

    jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动</title> <meta name="description" cont

  • jq实现左侧显示图片右侧文字滑动切换效果

    jq实现左侧显示图片右侧文字滑动切换效果

    分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 下面给大家分享下基于jq实现左侧显示图片右侧文字滑动切换效果,用div+css布置表单借用jq实现特效,具体不多说了,请看下面代码. html代码: <div class="index-new w1200 mt30"> <div class="indexadd mt50 mb60"> <div id="b

随机推荐