jQuery实现首页图片淡入淡出效果的方法

本文实例讲述了jQuery实现首页图片淡入淡出效果的方法。分享给大家供大家参考。具体分析如下：
这里演示当当网的品牌店铺首页效果，演示地址为：http://static.dangdang.com/gm/topic/2270_181320.shtml
效果图如下所示：

需求：
1. 绿色区域要求在图片上方，半透明显示
2. 当鼠标移动到红色区域，切换相应的图片
3. 首页的三张大图轮转
HTML：

<div id="carousel"><div id="carouselimg" class="content_top"> <div id="imgcontainer" class="slide_panel"><a target="_blank" href="http://www.baidu.com" mce_href="http://www.baidu.com"><img src="images/brandshop/band_lx_717x280.gif" mce_src="images/brandshop/band_lx_717x280.gif"/></a><a target="_blank" href="http://www.google.com" mce_href="http://www.google.com"><img src="images/brandshop/band_agz_717x280.gif" mce_src="images/brandshop/band_agz_717x280.gif"/></a><a target="_blank" href="http://www.dangdang.com" mce_href="http://www.dangdang.com"><img src="images/brandshop/band_qb_717x280.gif" mce_src="images/brandshop/band_qb_717x280.gif"/></a> </div> </div><div id="carouseltitle"> <ul><li> <a href="#" mce_href="#">联想 <span>lenovo</span></a></li><li> <a href="#" mce_href="#">爱国者 <span>aigo</span></a></li><li> <a href="#" mce_href="#">倩碧 <span>CLINIQUE</span></a> </li> </ul> </div>

CSS：

<mce:style type="text/css"><！--*{ padding:0; margin:0;}#carousel{ border-color:#DFDFDF;border-style:solid;border-width:0 1px 1px;position:relative;/*DO NOT delete this line*/}#carousel ul{ list-style:none;}#carousel #carouselimg{ position:relative;/*fix ie7 overflow bug*/ overflow:hidden;}#carousel #carouselimg #imgcontainer{ position:absolute; left:0px; top:0px;}#carousel #carouselimg img{ float:left;/*fix ie6 auto-margin bug*/ border:0; /*display:none;*/}#carousel #carouseltitle{ position:absolute; bottom:0px;}#carousel #carouseltitle ul{}#carousel #carouseltitle li{ width:239px; height:30px; line-height:30px; font-size:14px; text-align:center; background:#000; color:#FFF; float:left; cursor:pointer; opacity:.6; filter:alpha（opacity=60）;}#carousel #carouseltitle .active{ background:#cfaf73; color:#FFF; opacity:.9; filter:alpha（opacity=90）;}#carousel #carouseltitle .active a{ color:#000;}#carousel #carouseltitle li a{text-decoration:none;color:#fff;}#carousel #carouseltitle li a span{ font-family:Arial;} --></mce:style><style type="text/css" mce_bogus="1"> *{ padding:0; margin:0;}#carousel{ border-color:#DFDFDF;border-style:solid;border-width:0 1px 1px;position:relative;/*DO NOT delete this line*/}#carousel ul{ list-style:none;}#carousel #carouselimg{ position:relative;/*fix ie7 overflow bug*/ overflow:hidden;}#carousel #carouselimg #imgcontainer{ position:absolute; left:0px; top:0px;}#carousel #carouselimg img{ float:left;/*fix ie6 auto-margin bug*/ border:0; /*display:none;*/}#carousel #carouseltitle{ position:absolute; bottom:0px;}#carousel #carouseltitle ul{}#carousel #carouseltitle li{ width:239px; height:30px; line-height:30px; font-size:14px; text-align:center; background:#000; color:#FFF; float:left; cursor:pointer; opacity:.6; filter:alpha（opacity=60）;}#carousel #carouseltitle .active{ background:#cfaf73; color:#FFF; opacity:.9; filter:alpha（opacity=90）;}#carousel #carouseltitle .active a{ color:#000;}#carousel #carouseltitle li a{text-decoration:none;color:#fff;}#carousel #carouseltitle li a span{ font-family:Arial;} </style>

引入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<=100）{FR.Util.setOpacity（obj,value1）;value1+=increment; } else {clearInterval（FR.Carousel.i）;FR.Carousel._semaphore=0; } },speed）;}else { FR.Carousel._semaphore=0; return;}},fadeIntoColor:function（obj, steps, speed）{FR.Carousel._semaphore=1;var value1=100;var value2=0;if（obj.id！=FR.Carousel.counter）{ var carouselimg=FR.Util.$（"carouselimg"）; carouselimg.style.backgroundColor=FR.Carousel.bgColor; 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>=0）{FR.Util.setOpacity（tempobj,value1）;value1-=increment; } else if（value1<0 && value2<=100）{FR.Util.setOpacity（obj,value2）;value2+=increment; } else {clearInterval（FR.Carousel.i）;FR.Carousel._semaphore=0; } },speed）;} else { FR.Carousel._semaphore=0; return;}},scroll:function（curno, steps, speed）{FR.Carousel._semaphore=1;var ic=FR.Util.$（"imgcontainer"）;var count=（curno.split（""）[curno.length-1]-FR.Carousel.counter.split（""）[FR.Carousel.counter.length-1]）*FR.Carousel.height;FR.Carousel.counter=curno;var value1=0;var increment=count/steps;FR.Carousel.i=setInterval（function（）{ if（Math.abs（value1）<Math.abs（count））{ if（count>0）{FR.Util.setPosition（ic,0,-increment）;value1-=increment; } else{FR.Util.setPosition（ic,0,-increment）;value1+=increment; } } else { clearInterval（FR.Carousel.i）; FR.Carousel._semaphore=0; }},speed）;},crawl:function（curno, steps, speed）{FR.Carousel._semaphore=1;var ic=FR.Util.$（"imgcontainer"）;var count=（curno.split（""）[curno.length-1]-FR.Carousel.counter.split（""）[FR.Carousel.counter.length-1]）*FR.Carousel.width;FR.Carousel.counter=curno;var value1=0;var increment=count/steps;FR.Carousel.i=setInterval（function（）{ if（Math.abs（value1）<Math.abs（count））{ if（count>0）{FR.Util.setPosition（ic,-increment,0）;value1-=increment; } else{FR.Util.setPosition（ic,-increment,0）;value1+=increment; } } else { clearInterval（FR.Carousel.i）; FR.Carousel._semaphore=0; }},speed）;} };

可以实现图片的轮转效果，但是点击图片后，每次链接跳转都是最后一张图的a href
查看fr.carousel.js ，原来，它实现的思路是将三张图一张叠在一张上边，使用setInterval（） ,将一张图的opacity 值置为1，其余两张为0。但是，这将导致你点击图片后，每次的链接都是最上边的那张图（即最后倩碧那一张）。
解决方法：
设置轮转图的 z-index，当图片显示的时候，其父节点<a> 的z-index 比其它元素高。
jQuery实现：

// 判断img轮转，实现a跳转 setInterval（function（）{$（"#imgcontainer a"）.each（function（i）{ var img = $（this）.children（"img"）; var op = img.css（"opacity"）; if（op>0）{img.css（"z-index","100"）;$（this）.css（"z-index","100"）; }else{img.css（"z-index","0"）;$（this）.css（"z-index","0"）; }}） },100）;

希望本文所述对大家的jQuery程序设计有所帮助。