手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

效果不错的首页大banner展示

首页 > Javascript >

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

« 上一篇 | 下一篇 »

只显示10条记录相关文章

JQuery -- this 和 $(this) 的区别 (浏览: 85138, 评论: 3)
[转载]超强大的jquery formValidator (浏览: 50958, 评论: 3)
jQuery插件---获取URL参数 (浏览: 46251, 评论: 1)
jQuery的html()等方法介绍 (浏览: 45744, 评论: 1)
取得html中的comment的内容 (浏览: 41950, 评论: 2)
jQuery的bind函数 (浏览: 40743, 评论: 1)
将Yiiframework与JQuery easyUI整合使用 (浏览: 38198, 评论: 2)
jQuery一些插件的链接[转] (浏览: 37673, 评论: 2)
取消radio的选中状态 (浏览: 36855, 评论: 1)
JQuery学习第一天 (浏览: 35476, 评论: 3)

发表评论

评论内容 (必填):