本文实例讲述了jquery实现首页图片淡入淡出效果的方法。分享给大家供大家参考。具体分析如下：
这里演示当当网的品牌店铺首页效果，演示地址为：http://static.dangdang.com/gm/topic/2270_181320.shtml
效果图如下所示：
需求：
1. 绿色区域要求在图片上方，半透明显示
2. 当鼠标移动到红色区域，切换相应的图片
3. 首页的三张大图轮转
html：
联想 lenovo 爱国者 aigo 倩碧 clinique

css：

引入river zhang 的fr.carousel.js
fr={ version:'1.0.0', author:'river zhang(zhang_hechuan@hotmail.com)', lisence:'mit lisence' }; fr.util={ //replace document.getelementbyid. $:function(id){ return document.getelementbyid(id); }, //replace getelementsbytagname. $$:function(node, tag){ return node.getelementsbytagname(tag); }, creat:function(node,name){ var element=document.createelement(name); node.appendchild(element); return element; }, //event binding functions. addevent:function(eventtype,eventfunc,eventobj){ eventobj = eventobj || document; if(window.attachevent)eventobj.attachevent(on+eventtype,eventfunc); if(window.addeventlistener) eventobj.addeventlistener(eventtype,eventfunc,false); }, setopacity:function(obj, value) { if (document.all) obj.style.filter = alpha(opacity= + value + ); else obj.style.opacity = value / 100; }, setposition:function(obj, x, y){ var curx=parseint(obj.style.left); var cury=parseint(obj.style.top); if(isnan(curx)) curx=cury=0; var newx=curx+x; var newy=cury+y; obj.style.left=newx+'px'; obj.style.top=newy+'px'; } }; fr.carousel={ version:'1.1', mode:1, steps:20, period:25, width:300, height:200, bgcolor:'#000000', autoswitch:true, delay:5000, _semaphore:0,/* do not try to modify this value */ start:function(args){ if(typeof(args)!='undefined'){ fr.carousel.mode=args.mode||fr.carousel.mode; fr.carousel.steps=args.steps||fr.carousel.steps; fr.carousel.period=args.period||fr.carousel.period; fr.carousel.width=args.width||fr.carousel.width; fr.carousel.height=args.height||fr.carousel.height; fr.carousel.bgcolor=args.bgcolor||fr.carousel.bgcolor; fr.carousel.autoswitch=args.autoswitch||fr.carousel.autoswitch; fr.carousel.delay=args.delay||fr.carousel.delay; } fr.util.addevent(load,fr.carousel.run,window); }, run:function(){ fr.carousel.initialcss(); fr.carousel.counter='frimg0'; var carouselimg=fr.util.$('carouselimg'); var img=fr.util.$$(carouselimg, 'img'); for(var i=0;i!=img.length;++i){ img[i].id='frimg'+i; if(fr.carousel.mode==4 || fr.carousel.mode==5) continue; img[i].style.position=absolute; img[i].style.left=0 px; img[i].style.top=0 px; fr.util.setopacity(img[i], 0); } if(fr.carousel.mode!=4) fr.util.setopacity(img[0], 100); if(fr.carousel.mode==1) bindfunction=function(name){fr.carousel.fade(fr.util.$(name), fr.carousel.steps, fr.carousel.period);}; else if(fr.carousel.mode==2) bindfunction=function(name){fr.carousel.flash(fr.util.$(name), fr.carousel.steps, fr.carousel.period);}; else if(fr.carousel.mode==3) bindfunction=function(name){fr.carousel.fadeintocolor(fr.util.$(name), fr.carousel.steps, fr.carousel.period);}; else if(fr.carousel.mode==4) bindfunction=function(name){fr.carousel.scroll(name, fr.carousel.steps, fr.carousel.period);}; else if(fr.carousel.mode==5) bindfunction=function(name){fr.carousel.crawl(name, fr.carousel.steps, fr.carousel.period);}; var carouseltitle=fr.util.$('carouseltitle'); var li=fr.util.$$(carouseltitle, 'li'); li[0].classname='#carousel #carouseltitle active'; fr.carousel.autocarousel(img.length); for(var i=0;i!=li.length;++i){ (function(){ var name='frimg'+i; li[i].onmouseover=function(){ clearinterval(fr.carousel.s); if(!fr.carousel._semaphore){ li[fr.carousel.counter.split('')[fr.carousel.counter.length-1]].classname=''; this.classname='#carousel #carouseltitle active'; bindfunction(name); } }; li[i].onmouseout=function(){ fr.carousel.autocarousel(img.length); } })(); } }, autocarousel:function(length){ if(fr.carousel.autoswitch){ fr.carousel.s=setinterval(function(){ var carouseltitle=fr.util.$('carouseltitle'); var li=fr.util.$$(carouseltitle, 'li'); li[fr.carousel.counter.split('')[fr.carousel.counter.length-1]].classname=''; var next=(parseint(fr.carousel.counter.split('')[fr.carousel.counter.length-1])+1)%length; li[next].classname='#carousel #carouseltitle active'; name='frimg'+next; bindfunction(name); },fr.carousel.delay); } }, initialcss:function(){ var carouselimg=fr.util.$('carouselimg'); var carousel=fr.util.$('carousel'); carouselimg.style.width=fr.carousel.width+px; carouselimg.style.height=fr.carousel.height+px; carousel.style.width=fr.carousel.width+px; carousel.style.height=fr.carousel.height+px; if(fr.carousel.mode==5){ var imgcontainer=fr.util.$('imgcontainer'); var img=fr.util.$$(carouselimg, 'img'); var size=img.length*fr.carousel.width; imgcontainer.style.width=size+px; } }, fade:function(obj, steps, speed) { fr.carousel._semaphore=1; var value1=0; var value2=100; if(obj.id!=fr.carousel.counter){ var carouselimg=fr.util.$('carouselimg'); var img=fr.util.$$(carouselimg, 'img'); for(var i=0;i!=img.length;++i){ if(i!=fr.carousel.counter.split('')[fr.carousel.counter.length-1]) fr.util.setopacity(img[i], 0); } temp=fr.carousel.counter; fr.carousel.counter=obj.id; tempobj=fr.util.$(temp); var increment=100/steps; fr.carousel.i=setinterval(function(){ if(value1<=100){ fr.util.setopacity(obj,value1); fr.util.setopacity(tempobj,value2); value1+=increment; value2-=increment; } else { clearinterval(fr.carousel.i); fr.carousel._semaphore=0; } },speed); }else { fr.carousel._semaphore=0; return; } }, flash:function(obj, steps, speed) { fr.carousel._semaphore=1; var value1=0; if(obj.id!=fr.carousel.counter){ var carouselimg=fr.util.$('carouselimg'); var img=fr.util.$$(carouselimg, 'img'); for(var i=0;i!=img.length;++i){ fr.util.setopacity(img[i], 0); } fr.carousel.counter=obj.id; var increment=100/steps; fr.carousel.i=setinterval(function(){ if(value1=0){ fr.util.setopacity(tempobj,value1); value1-=increment; } else if(value1<0 && value20){ img.css(z-index,100); $(this).css(z-index,100); }else{ img.css(z-index,0); $(this).css(z-index,0); } }) },100);
希望本文所述对大家的jquery程序设计有所帮助。