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].οnmοuseοver=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].οnmοuseοut=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);