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