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


Posted in Javascript onApril 27, 2015

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

Javascript 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
js读写json文件实例代码
Oct 21 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 #Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 #Javascript
jquery实现标签上移、下移、置顶
Apr 26 #Javascript
jquery ui resize 中border-box的bug修正
Apr 26 #Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 #Javascript
jquery获取节点名称
Apr 26 #Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 #Javascript
You might like
PHP实现动态web服务器方法
2015/07/29 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
Python实现视频下载功能
2017/03/14 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python新手学习可变和不可变对象
2020/06/11 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
爱情检讨书大全
2014/01/21 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
运动会开幕式主持词
2014/03/28 职场文书
面试必备的求职信
2014/05/25 职场文书
禁止酒驾标语
2014/06/25 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
小学老师对学生的评语
2014/12/29 职场文书
一般纳税人申请报告
2015/05/18 职场文书
关于教师节的广播稿
2015/08/19 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
Python数据分析之pandas读取数据
2021/06/02 Python