本文实例讲述了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="/static/imghwm/default1.png" data-src="image/1.JPG" class="lazy" alt="javascript+html5实现仿flash滚动播放图片的方法_javascript技巧" ></li> <li><img src="/static/imghwm/default1.png" data-src="image/2.JPG" class="lazy" alt="javascript+html5实现仿flash滚动播放图片的方法_javascript技巧" ></li> <li><img src="/static/imghwm/default1.png" data-src="image/3.JPG" class="lazy" alt="javascript+html5实现仿flash滚动播放图片的方法_javascript技巧" ></li> <li><img src="/static/imghwm/default1.png" data-src="image/4.JPG" class="lazy" alt="javascript+html5实现仿flash滚动播放图片的方法_javascript技巧" ></li> <li><img src="/static/imghwm/default1.png" data-src="image/5.JPG" class="lazy" alt="javascript+html5实现仿flash滚动播放图片的方法_javascript技巧" ></li> <li><img src="/static/imghwm/default1.png" data-src="image/6.JPG" class="lazy" alt="javascript+html5实现仿flash滚动播放图片的方法_javascript技巧" ></li> </ul> <div class="small_pic"> <ul> <li><img src="/static/imghwm/default1.png" data-src="image/1.JPG" class="lazy" alt="javascript+html5实现仿flash滚动播放图片的方法_javascript技巧" ></li> <li><img src="/static/imghwm/default1.png" data-src="image/2.JPG" class="lazy" alt="javascript+html5实现仿flash滚动播放图片的方法_javascript技巧" ></li> <li><img src="/static/imghwm/default1.png" data-src="image/3.JPG" class="lazy" alt="javascript+html5实现仿flash滚动播放图片的方法_javascript技巧" ></li> <li><img src="/static/imghwm/default1.png" data-src="image/4.JPG" class="lazy" alt="javascript+html5实现仿flash滚动播放图片的方法_javascript技巧" ></li> <li><img src="/static/imghwm/default1.png" data-src="image/5.JPG" class="lazy" alt="javascript+html5实现仿flash滚动播放图片的方法_javascript技巧" ></li> <li><img src="/static/imghwm/default1.png" data-src="image/6.JPG" class="lazy" alt="javascript+html5实现仿flash滚动播放图片的方法_javascript技巧" ></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程序设计有所帮助。
Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AMPython和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。
从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。
JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。
超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AMJavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。
使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。 首先，什么是多租户SaaS应用程序？ 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务
如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库
JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AMJavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。
JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AMJavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
