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

效果不错的首页大banner展示

Submitted by gouki on 2009, September 8, 10:10 PM

看看这个效果如何？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

Javascript | 评论:0 | 阅读:22447