Kaedah jQuery untuk mencapai kesan fade-in dan fade-out pada halaman utama pictures_jquery

Contoh dalam artikel ini menerangkan cara menggunakan jQuery untuk mencapai kesan fade-in dan fade-out pada imej halaman utama. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Berikut ialah demonstrasi kesan halaman utama kedai jenama Dangdang Alamat tunjuk cara ialah: http://static.dangdang.com/gm/topic/2270_181320.shtml

Rendering adalah seperti berikut:

Keperluan:

1. Kawasan hijau mestilah di atas gambar dan dipaparkan secara separa telus

2. Apabila tetikus bergerak ke kawasan merah, tukar gambar yang sepadan

3. Putaran tiga gambar besar pada halaman utama

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>

Memperkenalkan fr.carousel.js by 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); 
 } 
}; 

Anda boleh mencapai kesan putaran imej, tetapi selepas mengklik pada imej, setiap lompatan pautan akan menjadi href daripada imej terakhir

Lihat fr.carousel.js ternyata idea pelaksanaannya adalah untuk menyusun tiga gambar di atas satu sama lain, gunakan setInterval() untuk menetapkan nilai kelegapan satu gambar kepada 1, dan dua lagi kepada 0 . Walau bagaimanapun, ini akan menyebabkan setiap kali anda mengklik pada gambar, pautan akan menjadi gambar teratas (iaitu, yang terakhir Clinique).

Penyelesaian:

Tetapkan indeks-z imej karusel Apabila imej dipaparkan, indeks-z nod induknya

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

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.