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 相关文章推荐
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
angularjs性能优化的方法
Sep 05 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
Vue.js中的组件系统
May 30 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 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
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
js确定对象类型方法
2012/03/30 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
对Python中数组的几种使用方法总结
2018/06/28 Python
深入理解Python异常处理的哲学
2019/02/01 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
linux面试题参考答案(9)
2016/01/29 面试题
美术专业个人自我评价
2014/01/18 职场文书
开业典礼主持词
2014/03/21 职场文书
了解Redis常见应用场景
2021/06/23 Redis
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript