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程序设计有所帮助。
相关推荐
-
js实现图片无缝滚动特效
首先,无缝滚动的第一个重点就是--动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识. JS中的创建定时器的方法包括两种:setTimeout和setInterval.首先它们接收的参数相同:第一个参数是一个函数,用于定时器执行,第二个参数是一个数字,代表过多少毫秒之后定时器执行函数.它们的不同在于:setTimeout 是在经过指定的时间之后,只执行一次函数,而setInterval,则是每间隔指定时间,就执行函数一次,说简单点的话,就是setInter
-
js+div实现文字滚动和图片切换效果代码
本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes
-
JS图片无缝、平滑滚动代码
非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht
-
js实现鼠标经过时图片滚动停止的方法
本文实例讲述了js实现鼠标经过时图片滚动停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
-
js代码实现无缝滚动(文字和图片)
一款适用于方案和图片的JS无缝滚动代码,可控制向左或向右滚动,代码不算复杂,而且本无缝滚动代码兼容性也挺好,你几乎不需要修改什么代码,就能使用了.测试时候把那些带标号的方块都改成图片吧,这样就更有感觉了. 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无缝滚动</title> <s
-
JavaScript代码实现图片循环滚动效果
1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.setTimeout()方法的语法格式如下: setTimeout(function,milliseconds,[arguments]) 参数说明: a. function:要调用的JavaScript自定义函数名称. b. Milliseconds:设置超时时间(以毫秒为单位). 功能:经过超时时间后
-
Javascript 实现图片无缝滚动
效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动 可以调整向左或右方向滚动 复制代码 代码如下: <style type="text/css"> * { margin: 0; padding: 0; } #div1 { overflow: hidden; width: 71
-
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全(推荐)
废话不多说了,直接给大家贴代码了,具体代码如下所示: <head> <-----> </head> <body> <!--向下滚动代码开始--> <div id="colee" style="overflow:hidden;height:253px;width:410px;"> <div id="colee1"> <p><img src=&quo
-
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/jav
-
基于JavaScript怎么实现让歌词滚动播放
各种音乐播放器上都有一个自动滚动播放歌词的功能,当前滚动到的歌词会高亮居中显示,即使歌词被换行也能正常居中,那么这个功能基于JavaScript怎么实现让歌词滚动播放呢?请看下文详解. 一般音乐播放器使用的歌词格式都是lrc,为了方便处理,我们这里使用XML格式的歌词.介绍一个网站:中文歌词库.它提供xml格式的歌词. 我们先来看一下这个例子的最终效果: 下面是基于jQuery的具体代码: <!DOCTYPE html> <html lang="en"> <
-
用javascript实现的仿Flash广告图片轮换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-
-
Android Kotlin仿微信头像裁剪图片的方法示例
0.前言 最近突发了很多事情,又跟康仔跳票了,无可奈何,不好意思了.最近生活上有很多感悟,一个男人的牛逼就在于平衡工作,学习和家庭,这个点很难把握,既要保证家庭和睦,又要保证自己价值的实现从而避免堕入平庸,每个人的状况都是不一样的,没有什么经验是可以照搬的,怎么说呢,不断摸索吧. 1.分析 整个效果是仿照微信来做的,效果如图所示: 整个效果就是从图库选取一张图片,并进行裁剪,从图库选取没什么好说的,就说说怎么做的裁剪控件吧,这个裁剪控件就是ClipImageView,可以看到它有一个阴影遮罩,一
-
用js实现的一个Flash滚动轮换显示图片代码生成器
复制代码 代码如下: <!--文件头模板--> <SCRIPT src=top.js></SCRIPT> <SCRIPT language=javascript> writeTop('Flash滚动显示图片代码生成','2006-10-18'); </SCRIPT> <!--以下为内容--> <SCRIPT> //运行代码 function runEx(cod1) { cod=document.getE
-
基于javascript html5实现多文件上传
本文实例为大家分享了javascript html5实现多文件上传的实现方法,具体内容如下 HTML结构: <div class="container"> <label>请选择一个图像文件:</label> <input type="file" id="file_input" multiple/> </div> 顺便说下这个上传的主要逻辑: 用input标签并选择type=file,记得
-
JavaScript仿flash遮罩动画效果
本文实例为大家分享了JavaScript仿flash遮罩动画的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仿flash遮罩动画</title> <meta name="keywords" content=""> <meta name="
-
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
本文实例讲述了JavaScript学习笔记之基于定时器实现图片无缝滚动功能.分享给大家供大家参考,具体如下: 一.无缝滚动理论基础 基础知识 1.setInterval(function,time).clearInterval(timer) setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clea
-
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播效果,同时支持底部缩略图左右滚动展示,点击大图片后支持放大效果. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大
-
基于HTML5的可预览多图片Ajax上传
一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇"Ajax Upload多文件上传插件"的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中