JQuery implements the method for fade-in and fade-out of homepage images.

JQuery implements the method for fade-in and fade-out of homepage images.

This article describes how jQuery implements the fade-in and fade-out of homepage images. Share it with you for your reference. The specific analysis is as follows:

Here to demonstrate Dangdang brand shop home effect, demo address: http://static.dangdang.com/gm/topic/2270_181320.shtml

As follows:

Requirements:

1. The green area must be on top of the image and displayed in a translucent manner.

2. When the mouse moves to the red area, switch the corresponding image

3. Rotation of three big charts on the home page

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 ">  </a> a target = "_ blank" href = "http://www.google.com" mce_href = "http://www.google.com">  </a> <a target = "_ blank" href = "http://www.dangdang.com" mce_href = "http://www.dangdang.com">  </a> </div> <div id =" carouseltitle "> <ul> <li> <a href =" # "mce_href = "#"> lenovo <span> lenovo </span> </a> </li> <a href = "#" mce_href = "#"> patriot <span> aigo </span> </a> </li> <a href = "#" mce_href = "#"> CLINIQUE <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>

Introduce fr. eclipusel. js of River Zhang

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);  } }; 

Images can be rotated, but after you click an image, each link jump is the href of the last image.

View fr. invalid usel. js, originally, it implemented the idea of stacked three images on one top, using setInterval (), set the opacity value of one image to 1, and the remaining two images to 0. However, this will cause you to click the image, and each link will be the top image (that is, the last photo of Clinique ).

Solution:

Set the z-index of the rotation chart. When the image is displayed, the z-index of its parent node <a> is higher than that of other elements.

JQuery implementation:

// Determine the img rotation and implement a jump setInterval (function () {$ ("# imgcontainer "). each (function (I) {var img = $ (this ). children ("img"); var op = img.css ("opacity"); if (op> 0) {img.css ("z-index", "100 "); certificate (this).css ("z-index", "100");} else {img.css ("z-index", "0"); Certificate (this).css ("z-index ", "0") ;}}}, 100 );

I hope this article will help you with jQuery programming.