jquery to achieve the first page image fade effect method _jquery

This article illustrates the method of jquery to realize the fading effect of the first page picture. Share to everyone for your reference. The specific analysis is as follows:

Here demo Dangdang Brand Shop Home Effect, demo address: http://static.dangdang.com/gm/topic/2270_181320.shtml

The effect diagram looks like this:

Demand:

1. Green area requirements above the picture, translucent display

2. When the mouse moves to the red area, toggle the corresponding picture

3. Homepage's three big picture rotation

Html:

<div id= "Carousel" > <div id= "carouselimg" class= "Content_top" > <div id= "Imgcontainer" class= "Slide_pa" Nel "> <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> <div id= "Carouseltitle" > <ul> <li> <a href= "#" mce_href= "#" > Lenovo <span>lenovo</span></a> </li&gt 
   ; <li> <a href= "#" mce_href= "#" > Patriot <span>aigo</span></a> </li> <li> <a href= "#" mce_href= "#" > Clinique <span>clinique&lt

 ;/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 deletes 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 deletes 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>

Introducing the fr.carousel.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 ', AUTOSWITC H:true, delay:5000, _semaphore:0,/* do don't try to modify this value */start:function (args) {if (typeof) args '!= Efined ') {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); 

 } 
};

can achieve the rotation effect of the picture, but click on the picture, each link jump is the last picture of a href

View Fr.carousel.js, it turns out, it realizes the idea is to three pictures of a stack on top of a piece, using setinterval (), the opacity value of a map to 1, the remaining two for 0. However, this will cause you to click on the image, each link is the top of the picture (that is, the last Clinique that one).

Workaround:

Set the z-index of the rotation chart, when the picture is displayed, its parent node <a> Z-index is higher than other elements.

jquery implementation:

To determine the IMG rotation, implement a jump 
setinterval (function () { 
 $ ("#imgcontainer a"). each (function (i) { 
  var img = $ (this). Children ("img"); 
  var op = img.css ("opacity"); 
  if (op>0) { 
   img.css ("Z-index", "M"); 
   $ (this). CSS ("Z-index", "M"); 
  else{ 
   img.css ("Z-index", "0"); 
   $ (this). CSS ("Z-index", "0"); 
  } 
 }) 
},100);

I hope this article will help you with your jquery programming.