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程序设计有所帮助。