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中处理与当前时间间隔的函数代码
May 23 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 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
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
python网络编程学习笔记(四):域名系统
2014/06/09 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
python实现画循环圆
2019/11/23 Python
python如何基于redis实现ip代理池
2020/01/17 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
10条PHP编程习惯
2014/05/26 面试题
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
店长岗位职责
2013/11/21 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
工厂会计员职责
2014/02/06 职场文书
店长岗位职责
2015/02/11 职场文书
2015新学期开学寄语
2015/02/26 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python