jquery to achieve the first page image fade effect method _jquery

Source: Internet
Author: User
Tags abs setinterval lenovo

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.