看看这个效果如何?http://www.cssrain.cn/demo/webDemo/index.html,说老实话,我第一次看到的时候,真的以为是flash的。它的作者是不羁虫,用他的话来说是:
个人介绍
- 从事IT3年左右,专业前端工作2年左右,熟悉前端体验,Web标准(大侠很多,不敢自言精通),对jQuery的认识不到一年,jq很符合前端开发的习惯,努力学习中,也正是因为jquery认识了cssrain,这里的文章和插件都很不错,非常骄傲国内能有这样熬的交流的地方。
JavaScript代码
- /*调用区域*/
- $(document).ready(function(){
- var pos=new Array();
- pos=['585px','24px','88px','25px'];
- var stepIndex=0;
- var clickKey=0;
- var now,next,clickIndex,startRun;
- window.stepRun=function () {
- now=stepIndex;
- if(clickKey==1){
- next = stepIndex = clickIndex;
- clickKey=0;
- startRun = setInterval("stepRun()",8000);
- }else if (stepIndex<pos.length-1) {
- next = stepIndex+1;
- stepIndex++;
- }else{next = stepIndex = 0;}
- //alert(clickKey);
- $('#bNav').animate({height:0},1000,function () {
- $('#bannerSlider img').eq(now).fadeOut(2000);
- $('#bannerSlider img').eq(next).fadeIn(2000);
- $('#bNav li').eq(now).removeClass('now');
- $('#maskBg_1').animate({left:'220px',width:0},1000)
- .animate({left:pos[next],width:'264px'},1000,function (){
- $('#bNav li').eq(next).addClass('now');
- $('#bNav').attr('className','bNav_'+next+'').animate({height:'300px'},1000);
- });
- });
- }
- startRun = setInterval("stepRun()",8000);
- $('#bNav a').click(function (){
- clickIndex=$('#bNav a').index($(this));
- clearInterval(startRun);
- clickKey=1;
- stepRun();
- return false;
- });
- });