手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:banner

效果不错的首页大banner展示

看看这个效果如何?http://www.cssrain.cn/demo/webDemo/index.html,说老实话,我第一次看到的时候,真的以为是flash的。它的作者是不羁虫,用他的话来说是:

个人介绍
  1. 从事IT3年左右,专业前端工作2年左右,熟悉前端体验,Web标准(大侠很多,不敢自言精通),对jQuery的认识不到一年,jq很符合前端开发的习惯,努力学习中,也正是因为jquery认识了cssrain,这里的文章和插件都很不错,非常骄傲国内能有这样熬的交流的地方。  
核心代码如下:
JavaScript代码
  1. /*调用区域*/  
  2. $(document).ready(function(){  
  3.   
  4.   
  5. var pos=new Array();  
  6. pos=['585px','24px','88px','25px'];  
  7. var stepIndex=0;  
  8. var clickKey=0;  
  9. var now,next,clickIndex,startRun;  
  10.   
  11. window.stepRun=function () {  
  12. now=stepIndex;  
  13. if(clickKey==1){  
  14.     next = stepIndex = clickIndex;  
  15.     clickKey=0;  
  16.     startRun = setInterval("stepRun()",8000);  
  17. }else if (stepIndex<pos.length-1) {  
  18.     next = stepIndex+1;  
  19.     stepIndex++;  
  20. }else{next = stepIndex = 0;}  
  21.   
  22. //alert(clickKey);  
  23.   
  24.   
  25. $('#bNav').animate({height:0},1000,function () {  
  26. $('#bannerSlider img').eq(now).fadeOut(2000);  
  27. $('#bannerSlider img').eq(next).fadeIn(2000);  
  28. $('#bNav li').eq(now).removeClass('now');  
  29. $('#maskBg_1').animate({left:'220px',width:0},1000)  
  30.                         .animate({left:pos[next],width:'264px'},1000,function (){  
  31.                             $('#bNav li').eq(next).addClass('now');  
  32.                             $('#bNav').attr('className','bNav_'+next+'').animate({height:'300px'},1000);  
  33.                         });  
  34. });  
  35.   
  36. }  
  37.   
  38. startRun = setInterval("stepRun()",8000);  
  39.   
  40. $('#bNav a').click(function (){  
  41.     clickIndex=$('#bNav a').index($(this));  
  42.     clearInterval(startRun);  
  43.     clickKey=1;  
  44.     stepRun();  
  45.     return false;  
  46. });  
  47.   
  48.   
  49.   
  50. });  
不过,尽量是从这里下载:http://www.cssrain.cn/demo/webDemo/webDemo.rar

 

 

Tags: jquery, banner