本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法。分享给大家供大家参考。具体如下:
html部分:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="/UploadFiles/2021-04-02/move.js">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"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程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- 任天堂今晚举行直面会!第三方及独立游戏展示
- 《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A梦
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
- 陈奕迅.2013-Easons.Life演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许美静.1995-遗憾(新马版)【上华】【WAV+CUE】
- 《叶倩文 歌声情缘》[WAV+CUE][410MB]
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-7