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

本文实例讲述了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程序设计有所帮助。