suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie eine Flash-ähnliche Scroll-Wiedergabe von Bildern mithilfe von Javascript-HTML5_Javascript-Kenntnissen

So implementieren Sie eine Flash-ähnliche Scroll-Wiedergabe von Bildern mithilfe von Javascript-HTML5_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 16:02:031223Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie man eine Flash-ähnliche Scroll-Wiedergabe von Bildern mit Javascript HTML5 implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

HTML-Teil: 

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <script src="move.js" type="text/javascript"></script> 
 <link href="css.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
<div id="playImages" class="play"> 
 <ul class="big_pic"> 
  <div class="prev"></div> 
  <div class="next"></div> 
  <a class="mark_left" href="javascript:;"></a> 
  <a class="mark_right" href="javascript:;"></a> 
  <li style="z-index: 1"><img src="image/1.JPG"></li> 
  <li><img src="image/2.JPG"></li> 
  <li><img src="image/3.JPG"></li> 
  <li><img src="image/4.JPG"></li> 
  <li><img src="image/5.JPG"></li> 
  <li><img src="image/6.JPG"></li> 
 </ul> 
 <div class="small_pic"> 
  <ul> 
   <li><img src="image/1.JPG"></li> 
   <li><img src="image/2.JPG"></li> 
   <li><img src="image/3.JPG"></li> 
   <li><img src="image/4.JPG"></li> 
   <li><img src="image/5.JPG"></li> 
   <li><img src="image/6.JPG"></li> 
  </ul> 
 </div> 
</div> 
</body> 
</html>

CSS-Teil: 

body{ margin: 0px; padding: 0px; }
ul{ margin: 0px; padding: 0px; }
li{ list-style: none; } 
.play{ width: 600px; height: 550px; left: 30px; top: 20px;
position: relative; border: 2px solid black;
} 
.big_pic{ width: 600px; height: 400px; position: relative;
background: snow; overflow: hidden;
} 
.big_pic li{ width: 600px; height: 400px; overflow:hidden;
position: absolute; background: black; z-index: 0
} 
.big_pic li img{ width: 600px; height: 400px;
position: absolute;
} 
.mark_left{ width: 300px; height: 400px;
background: orange; position: absolute; left: 0px; top: 0px;
z-index: 3000; filter: alpha(opacity:0); opacity: 0;
} 
.mark_right{ width: 300px; height: 400px; background: cornflowerblue;
position: absolute; left: 300px; top: 0px;
z-index: 3000; filter: alpha(opacity:0); opacity: 0;
} 
.prev{ width: 60px; height: 60px; 
background: url(image/btn.gif) no-repeat; position: absolute; 
z-index: 3001; top: 170px; left: 10px; cursor: pointer; 
filter: alpha(opacity:0); opacity: 0;
} 
.next{ width: 60px; height: 60px; 
background: url(image/btn.gif) no-repeat 0 -60px; 
position: absolute; z-index: 3001; top: 170px; right: 10px;
cursor: pointer; filter: alpha(opacity:0); opacity: 0;
} 
.small_pic{ width: 594px; height: 144px; 
position: relative;top: 0;left: 0;
border: 3px solid paleturquoise;overflow: hidden;
} 
.small_pic ul{ width: 594px; height: 144px; 
position: absolute; left: 0px;top: 0px;
} 
.small_pic li img{ width: 194px; height: 140px; } 
.small_pic ul li{ border:2px solid paleturquoise;
width: 194px; height: 140px; float: left;
cursor: pointer; filter: alpha(opacity:60); opacity: 0.6;
}

JS-Teil: 

window.onload=function(){ 
 var oPlay=document.getElementById('playImages'); 
 var uBig=getClass(oPlay,'big_pic')[0]; 
 var uSmall=getClass(oPlay,'small_pic')[0]; 
 var oPrev=getClass(oPlay,'prev')[0]; 
 var oNext=getClass(oPlay,'next')[0]; 
 var aLeft=getClass(oPlay,'mark_left')[0]; 
 var aRight=getClass(oPlay,'mark_right')[0]; 
 var oUlSmall=uSmall.getElementsByTagName('ul')[0]; 
 var oSli=uSmall.getElementsByTagName('li'); 
 var oBli=uBig.getElementsByTagName('li'); 
 oUlSmall.style.width=oSli[0].offsetWidth*oSli.length+'px'; 
 oPrev.onmouseover=aLeft.onmouseover=function(){ 
  move(oPrev,100,'opacity'); 
 }; 
 oPrev.onmouseout=aLeft.onmouseout=function(){ 
  move(oPrev,0,'opacity'); 
 }; 
 oNext.onmouseover=aRight.onmouseover=function(){ 
  move(oNext,100,'opacity'); 
 }; 
 oNext.onmouseout=aRight.onmouseout=function(){ 
  move(oNext,0,'opacity'); 
 }; 
 var index=0; 
 var newZIndex=2; 
 for (var i=0;i<oSli.length;i++){ 
  oSli[i].num=i; 
  oSli[i].onclick=function(){ 
   if(this.num==index) { 
    return; 
   } else{ 
    index=this.num; 
    tab(); 
   } 
  }; 
  oSli[i].onmouseover=function(){ 
   move(this,100,'opacity'); 
  }; 
  oSli[i].onmouseout=function(){ 
   if(this.num!=index){ 
    move(this,60,'opacity'); 
   } 
  }; 
 } 
 oPrev.onclick=function(){ 
  index--; 
  if(index==-1){ 
   index=oSli.length-1; 
  } 
  tab(); 
 }; 
 oNext.onclick=function(){ 
  index++; 
  if(index==oBli.length){ 
   index=0; 
  } 
  tab(); 
 }; 
 function tab() { 
  oBli[index].style.height = 0; 
  oBli[index].style.zIndex = newZIndex++; 
  move(oBli[index], 400, 'height'); 
  for (var i = 0; i < oSli.length; i++) { 
   move(oSli[i], 60, 'opacity'); 
  } 
  move(oSli[index], 100, 'opacity'); 
  if (index == 0) { 
   move(oUlSmall, 0, 'left'); 
  } else if (index == oSli.length - 1) { 
   move(oUlSmall, -(index - 2) * oSli[0].offsetWidth, 'left'); 
  } else { 
   move(oUlSmall, -(index - 1) * oSli[0].offsetWidth, 'left'); 
  } 
 }; 
 var timer=setInterval(oNext.onclick,3000);; 
 oPlay.onmouseover=function(){ 
  clearInterval(timer); 
 }; 
 oPlay.onmouseout=function(){ 
  timer=setInterval(oNext.onclick,3000); 
 }; 
}; 
function getStyle(obj,name){ 
 if(obj.currentStyle){ 
  return obj.currentStyle[name]; 
 }else{ 
  return getComputedStyle(obj,false)[name]; 
 } 
}; 
function move(obj,iTarget,name){ 
 clearInterval(obj.timer); 
 obj.timer=setInterval(function(){ 
  var cur=0; 
  if(name=='opacity'){ 
   cur=Math.round(parseFloat(getStyle(obj,name))*100); 
  }else{ 
   cur=parseInt(getStyle(obj,name)); 
  } 
  var speed=(iTarget-cur)/30; 
  speed=speed>0&#63;Math.ceil(speed):Math.floor(speed); 
  if(cur==iTarget){ 
   clearInterval(obj.timer); 
  }else{ 
   if(name=='opacity'){ 
    obj.style.opacity=(cur+speed)/100; 
    obj.style.filter='alpha(opacity:'+cur+speed+')'; 
   }else{ 
    obj.style[name]=cur+speed+"px"; 
   } 
  } 
 },30); 
}; 
function getClass(oParent,name){ 
 var oArray=[]; 
 var oBj=oParent.getElementsByTagName('*'); 
 for(var i=0;i<oBj.length;i++){ 
  if(oBj[i].className==name){ 
   oArray.push(oBj[i]); 
  } 
 } 
 return oArray; 
}

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript realisiert die Echtzeitausgabe der aktuellen time_javascript-KenntnisseNächster Artikel：Javascript realisiert die Echtzeitausgabe der aktuellen time_javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen