javascript+html5实现仿flash滚动播放图片的方法

前端技术 2023/09/03 JavaScript

本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法。分享给大家供大家参考。具体如下：

html部分：

<!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部分：

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部分：

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

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/8768

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案