html 图片自动滚动播放,javascript+html5实现仿flash滚动播放图片的方法
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法。分享给大家供大家参考。具体如下:
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.οnlοad=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.οnmοuseοver=aLeft.οnmοuseοver=function(){
move(oPrev,100,'opacity');
};
oPrev.οnmοuseοut=aLeft.οnmοuseοut=function(){
move(oPrev,0,'opacity');
};
oNext.οnmοuseοver=aRight.οnmοuseοver=function(){
move(oNext,100,'opacity');
};
oNext.οnmοuseοut=aRight.οnmοuseοut=function(){
move(oNext,0,'opacity');
};
var index=0;
var newZIndex=2;
for (var i=0;i
oSli[i].num=i;
oSli[i].οnclick=function(){
if(this.num==index) {
return;
} else{
index=this.num;
tab();
}
};
oSli[i].οnmοuseοver=function(){
move(this,100,'opacity');
};
oSli[i].οnmοuseοut=function(){
if(this.num!=index){
move(this,60,'opacity');
}
};
}
oPrev.οnclick=function(){
index--;
if(index==-1){
index=oSli.length-1;
}
tab();
};
oNext.οnclick=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.οnmοuseοver=function(){
clearInterval(timer);
};
oPlay.οnmοuseοut=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
if(oBj[i].className==name){
oArray.push(oBj[i]);
}
}
return oArray;
}
希望本文所述对大家的javascript程序设计有所帮助。
html 图片自动滚动播放,javascript+html5实现仿flash滚动播放图片的方法相关推荐
- html5多张图片滚动播放,javascript+html5实现仿flash滚动播放图片的方法_javascript技巧...
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...
- 仿flash滚动播放图片
仿flash滚动播放图片 代码: html部分: <!DOCTYPE html> <html> <head lang="en"><meta ...
- 摄屏播放插件html5,Js视频播放器插件Video.js使用方法详解
Video.js快速入门 我们可以下载 Video.js 的源码放到自己的服务器上,或者使用免费的 CDN 托管版本. 在页面中引用video-js.cs样式文件和video.js 使用免费的CDN托 ...
- [微信音频播放器] html5 audio 制作的微信播放器
weixinAudio.js 一个简单的微信样式播放器 播放器DOM及CSS是微信里内置的音频播放器的样式,重新创建了控制层js,方便在在公众号,APP等场景使用. 例子 demo 地址 github ...
- html设置播放器位置,【关于Flash网页播放器的定位与浮动的HTML代码】
代码说明:autoStart=false或true(是否自动播放"false"是手动播放;"true"是自动播放)repeatPlay=true或false(是 ...
- html5图片自动翻转,纯js实现360度旋转预览图片特效
这是一款纯js实现360度旋转预览图片特效.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. 使用方法 HTML结构 import Roll ...
- html5 js图片另存为,amCharts之JavaScript/HTML5 Charts应用教程二:将JS图表另存为图片...
通常,将JavaScript图表另存为图片是一个非常复杂的过程,但amCharts的 1.首先下载canvg 2.包括canvg.js, rbgcolor.js, amcharts.js以及以下扩展: ...
- 用html做成的音频播放器,HTML5制作酷炫音频播放器插件图文教程
上图便是这个音频播放器的UI界面图,里面还隐藏了一个歌曲的播放列表.整个播放器的UI除了大背景的人像图和歌曲的星星评分使用了图片其他全部由CSS和font-face绘制而成,看上去有难度的地方就只有C ...
- html ie浏览器视频无法播放视频,HTML5视频以Chrome格式播放,但不播放IE9
我已经尝试了你可以在互联网上找到的所有混合物,这里关于编码,htaccess和视频元素标记,但是我无法在IE9中播放这些视频,而它们在Chrome中完美运行.有谁知道魔法仙尘让这个工作?在IE中显示的 ...
最新文章
- html实现pdf预览打印机,Pdf操作(HTML转PDF,PDF直接网页连接打印机)
- LeetCode【位运算】371. 两整数之和
- 数据库性能检查指导方案
- 上升沿_输入输出的上升沿和下降沿是怎么来的,一起看看
- linux服务器查配置信息失败,查看Linux服务器的配置信息
- 物联网搜集大量数据协助制定业务策略 成为银行业竞争利器
- 笔记3:数字和数学计算
- Unity3D游戏开发之Unity3D场景编辑器扩展开发
- Hybrid App基础知识
- 基于MinimaxAlpha-Beta剪枝和强化学习的播棋(Mancala)AI
- 关于迪文屏T5L使用C51编程
- http://dongxicheng.org/
- 一道简单的百度笔试题
- 【WAF技巧拓展】————4、web应用防火墙逃逸技术(一)
- 计算机型号或配置,新手必看电脑配置及型号含义速成!
- MongoDB 4.2.3 安装以及安装遇到的问题“service MongoDB failed to start,verify that you have sufficient privilege”
- Excel 怎么让行或列倒转过来?
- java 全角_java 全角半角字符转换的方法实例
- win10解决redis桌面管理工具RedisDesktopManager右边黑屏问题
- springboot+Vue饭店点菜点餐管理系统
热门文章
- 机架服务器和群晖存文件对比,如何选购群晖nas网络存储服务器?
- En-Tan-Mo(ETM)项目周报(8.2-8.8)
- app常见功能模块及其使用简单介绍
- Kafka的ISR收缩机制
- 2022 年超过 27 个最流行的计算机视觉应用程序和用例
- 自动化立体仓库的规划与设计(学习笔记)
- [渝粤教育] 广东-国家-开放大学 21秋期末考试大学英语210262k2 (2)
- linux终端能显示中文,但是不能输入中文的解决方法
- 一扩四(​FE8.1)USB转接和一扩七(FE2.1)USB原理图和PCB分享
- 【深度学习概述学习小结】