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 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
Javascript中的常见排序算法
Mar 27 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
原生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 启动时报错的简单解决方法
2014/01/27 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
轻松实现php文件上传功能
2017/02/17 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
Python实现拼接多张图片的方法
2014/12/01 Python
python文件与目录操作实例详解
2016/02/22 Python
python 基础教程之Map使用方法
2017/01/17 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
Python多继承原理与用法示例
2018/08/23 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
python梯度下降算法的实现
2020/02/24 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
班班通校本培训方案
2014/03/12 职场文书
求职自我评价怎么写
2015/03/09 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技
Vue router配置与使用分析讲解
2022/12/24 Vue.js