javascript+html5实现仿flash滚动播放图片的方法
内容摘要
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法。分享给大家供大家参考。具体如下:
html部分:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset
html部分:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset
文章正文
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法。分享给大家供大家参考。具体如下:
html部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!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部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 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部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | 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程序设计有所帮助。
代码注释