search

Home >Web Front-end >JS Tutorial >jquery diluted version of banner asynchronous picture text effect switching picture special effects_jquery

jquery diluted version of banner asynchronous picture text effect switching picture special effects_jquery

WBOY
WBOYOriginal
2016-05-16 16:53:011159browse
Copy code The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta charset='utf-8'/> <br><title>全屏淡入淡出简洁banner，异步图片文字效果切换图片特效</title> <br><meta name="keywords" content="淡化版banner,淡化版banner"> <br><meta name="description" content="淡入淡出简洁banner" /> <br><style type="text/css"> <br>body,ul,li,ol{list-style:none;padding:0px;margin:0px;font-size:12px;} <br>img{border:0px;} <br><br>.bzBanner{width:100%; min-width:980px; height:auto; overflow:hidden; position: relative; } <br>.bzBanner .content,.bzBanner .col,.bzBanner .col a{width:100%; height:100%; position: absolute; top:0px; left:0px; } <br>.bzBanner .btn{position: absolute; bottom:25px; right:50px; z-index:5; } <br>.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; } <br>.bzBanner .btn i:hover{background:#9C0; } <br>.bzBanner .btn i.act{opacity:0.8; filter:alpha(opacity=80); background:#9C0; } <br>.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; } <br>.bzBanner .pre{left:30px; } <br>.bzBanner .next{right:30px; background-position:0 -72px; } <br>.bzBanner .pre:hover{background-position:0 -144px; } <br>.bzBanner .next:hover{background-position:0 -216px; } <br>.bzBanner .col a{color:white; } <br>.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; } <br>.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); } <br>.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); } <br><br></style> <br></head> <br><body> <br><br><div class='bzBanner'> <br><div class='content'> <br><div class='col'> <br><a href='javascript:;' > <br><img src='./bzbanner/12.jpg' width=100% /> <br><span> <br><h3>独家首播：范玮琪&曾静玟《千年》</h3> <br><p>范玮琪&曾静玟《千年》MV首播！歌词特别力邀名词人葛大為操刀，延续“一日如千年”的概念，转换在爱情里就是可以把对方的思念拉得很长，每一秒的想念都可以像是一千年的蔓延。而一千年的等待，也因为一秒钟的珍爱相遇而有了意义爱情。</p> <br></span> <br></a> <br></div> <br><div class='col'> <br><a href='javascript:;' > <br><img src='./bzbanner/13.jpg' width=100% /> <br><span> <br><h3>独家首播：It Began With A Fallen Leaf</h3> <br><p>普莉西雅（Priscilla Ahn）和苏打绿全新单曲《It Began With A Fallen Leaf》MV首播！一袭白色雪纺洋装的普莉西雅置身于森林中，红发青峰似偶然闯入森林中活泼调皮的精灵，邂逅了森林中的仙女。歌曲由吴青峰作曲，普莉西雅和吴青峰共同作词，描述了对一位再也无法相见的好友的思念之情。</p> <br></span> <br></a> <br></div> <br><div class='col'> <br><a href='javascript:;' > <br><img src='./bzbanner/14.jpg' width=100% /> <br><span> <br><h3>首播：真的假的</h3> <br><p>暌违乐坛八年陶晶莹新专辑同名主打《真的假的》MV官方版首播!歌曲由周杰伦＋林夕两位乐坛大才子携手合作，唱出男女情爱中许多真真假假的现象和矛盾，MV由廖人帥执导，时而如梦幻童话时而如辉煌宫殿的场景布置亦真亦假似幻似真，逼真特技效果十足！</p> <br></span> <br></a> <br></div> <br><div class='col'> <br><a href='javascript:;' > <br><img src='./bzbanner/15.jpg' width=100% /> <br><span> <br><h3>口袋·FAN 把你的偶像装进口袋里</h3> <br><p>睡不着过后，梦游到这里。在亚纶生日的这一天迎来闪闪发亮的【口袋·炎亚纶】！这里有新鲜资讯影像 ，是勾搭交流平台。是炎亚纶专属，为每一个可爱的布丁纪念永恒，关于阿布有爱的一切都在这里，在这 里全世界只看见你，快把阿布装进口袋，祝炎亚纶1120生日快乐！Android版和IOS越狱版抢先上线…</p> <br></span> <br></a> <br></div> <br></div> <br><div class='btn'><i></i><i></i><i></i><i></i></div> <br><a class='pre' href='javascript:;' title='上一张' ></a> <br><a class='next' href='javascript:;' title='下一张' ></a> <br></div> <br><br><script type="text/javascript" src="./jquery-1.10.2.min.js" ></script> <br><script type="text/ javascript" src="./bzBanner.min.js" ></script> <br><script type="text/javascript"> <br>$(function(){ benzi.bzBanner(); }); <br></script> <br></body> <br></html>

 
----------html----------------- -------------------------------------------------- --------------
<pre code_snippet_id=" 280064" snippet_file_name="blog_20140408_2_455436" name="code" class="javascript">/*================================ ===== <br>@Title: diluted version of banner with title description and small button <br>@Time: 2013.11.22 <br>@Source: BENZI.PW <br>@Description: <br><br> How to use the plug-in: <br>Please copy the CSS HTML completely before use.<br>benzi.bzBanner(); <br><br>Object calls are all changed in js<br>container: outermost frame<br>cols: all content<br>btns: all small buttons<br>act: Button activation style name <br>pre: Scroll forward button <br>next: Scroll backward button <br><br><br>====*/ <br>var benzi = { <br>bzBanner: function (){ <br><br>//All parameters are initialized (will be deleted after encapsulation) <br>var values ​​= { <br>container:$('.bzBanner'), <br>cols:$('.bzBanner .col'), <br>btns:$('.bzBanner .btn i'), <br>act:'act', <br>pre:$('.bzBanner .pre'), <br>next: $('.bzBanner .next'), <br>now:0 <br>} <br><br>//Fade effect, set zindex of all individual objects, and show and hide <br>// col: all Content object <br> // pre: previous object <br> // now: currently displayed object <br> // ----------------------- - <br>var weaken = function( pre,now ){ <br>var col = values.cols; <br>col.css({ zIndex:1 }).eq( pre ).css({ zIndex:2 } ); <br>col.eq( now ).css({ zIndex:3,opacity:0 }).stop(true).animate({ opacity:1 },700); <br>} <br><br>//Incremental calculation, return the previous displayed content and the current content to be displayed<br>// now: the currently selected index<br>//---------------- --- <br>var increase = function( now ){ <br>var pre = now ,now = pre 1; <br>if( now >= values.cols.length ) now = 0; <br>return { pre:pre ,now:now }; <br>} <br><br>//Decreasing calculation<br>//------------------ <br>var regression = function( now ){ <br>var pre = now ,now = pre - 1; <br>if( now < 0 ) now = values.cols.length-1; <br>return { pre: pre ,now:now }; <br>} <br><br>//Modify the small button style<br>//--------------------- <br>var btnStyle = function( now ){ <br>if( values.btns && values.act ) <br>values.btns.removeClass( values.act ).eq( now ).addClass( values.act ); <br>} <br><br>//Small button event hook, if there is a small button in the initialization, it will be executed, otherwise it will not be executed <br>//---------------- ------ <br>var button = function(){ <br>values.btns.click(function(){ <br>var now = $(this).index(); <br>if( values .now != now ){ <br>weaken( values.now ,now ); <br>btnStyle( now ); <br>text( now ); <br>values.now = now; <br>} <br>}); <br>} <br><br>//Content switching<br>// aspect: direction, 0 or no value means backward flipping, 1 means forward flipping<br>//------ ---------------- <br>var change = function( aspect ){ <br>var val = aspect ? regression( values.now ) : increase( values.now ); <br>weaken( val.pre ,val.now ); <br>btnStyle( val.now ); <br>text( val.now ); <br>values.now = val.now; <br>} <br><br>//Left and right button effects<br>//----------------------- <br>var shortcut = function(){ <br> values.pre.click(function(){ change(1); }); <br>values.next.click(function(){ change(); }); <br>} <br><br>// Text switching effect, this effect is very targeted and requires style support <br>//--------------------- <br>var text = function ( now ){ <br>values.cols.find('span').css({ opacity:0 }).eq( now ).stop(true).delay(500).animate({ opacity:1 }, 1000); <br>values.cols.find('h3').css({ opacity:0 }).eq( now ).stop(true).delay(500).animate({ opacity:1 },500 ); <br>values.cols.find('p').css({ opacity:0 }).eq( now ).stop(true).delay(1000).animate({ opacity:1 },500) ; <br>} <br><br>//Frame size<br>//-------------------------------- - <br>$(window).resize(function(){ <br>values.container.height( values.cols.find('img').height() ); <br>}).resize(); <br><br>//Auto play, the degrees method gets the corresponding parameters, and modifies the small button style (if there is a small button), and then refreshes the global variable values.now <br>// time: delay time<br> //--------------------- <br>var loop,play = function( time ){ <br>clearTimeout( loop ); <br>loop = setTimeout (function(){ <br>change(); <br>play( 3000 ); <br>}, time ); <br>} <br><br>//Pause and trigger automatic play<br>// --------------------- <br>var control = function(){ <br>values.container.hover(function(){ <br>clearTimeout( loop ); <br>},function(){ <br>play( 2000 ); <br>}); <br>} <br><br>//Initialize the effect and call each function <br>//-- ------------------ <br>var initialize = function(){ <br>var now = values.now; <br>weaken( values.cols.length-1 ,now ); <br>if(values.btns ) button(); <br>if( values.pre && values.next ) shortcut(); <br>btnStyle( now ); <br>text( now ); <br>play( 4000 ); <br>control(); <br>} <br><br>//Initialization call<br>//---------------- ----- <br>initialize(); <br><br>} <br><br>} <br>

 

 
< pre> 
 
 
 

  


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js get uploaded file size sample code_javascript skillsNext article：js get uploaded file size sample code_javascript skills
Related articles
See more