最近在学习JavaScript，试着写了一个图片播放器。
其实网上已经有各种各样的图片播放器了，我这个写得也不好，原理和别人的也差不多，就当作练习好了，希望能给初学者提供一点帮助！
简单介绍：ImgPlayer控件，可配置参数，支持自动播放、循环播放、显示设置和时间设置等。
使用方法：在html中创建一个（或多个）控件实例，与div（或td）绑定，代码如下：
<html>
<head>
<title>ImgPlayer</title>
<link href="ImgPlayer.css" rel="stylesheet" type="text/css"/>
<script src="ImgPlayer.js" type="text/javascript"></script>
<script language="javascript">
<!--
window.onload=function(){
var imgPlayer=new ImgPlayer();//创建控件实例
imgPlayer.add("0.jpg");//添加图片
imgPlayer.add("1.jpg");//添加图片
imgPlayer.add("2.jpg");//添加图片
imgPlayer.add("3.jpg");//添加图片
imgPlayer.bind(document.getElementById('Player'));//绑定控件
}
-->
</script>
</head>
<body>
<div id="Player"><div>
</body>
</html>
ImgPlayer控件效果图：
上面效果是采用控件默认配置，我们也可以自定义参数如：
window.onload=function(){
var imgPlayer=new ImgPlayer();//创建控件实例
imgPlayer.add("0.jpg");//添加图片
imgPlayer.add("1.jpg");//添加图片
imgPlayer.add("2.jpg");//添加图片
imgPlayer.add("3.jpg");//添加图片
imgPlayer.setImgWidth(800);//设置图片宽度（默认为400px）
imgPlayer.setImgHeight(600);//设置图片高度（默认为300px）
imgPlayer.setAuto(true);//设置自动播放（默认为false）
imgPlayer.setLoop(true);//设置循环播放（默认为false）
imgPlayer.setShowMode(2);//设置显示模式（默认为0）（0:全部;1:图片和描述;2:图片）
imgPlayer.setTime(1);//设置时间间隔（默认为3秒）
imgPlayer.bind(document.getElementById('Player'));//绑定控件
}
注意：添加图片和配置参数必须在绑定控制之前完成。
ImgPlayer.css文件代码如下：
body {
font-size:12px;
}
input {
border-left: #7b9ebd 1px solid;
padding-left: 2px;
border-right: #7b9ebd 1px solid;
padding-right: 2px;
border-top: #7b9ebd 1px solid;
padding-top: 2px;
border-bottom: #7b9ebd 1px solid;
padding-bottom: 2px;
font-size: 12px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
cursor: hand;
color: black;
}
button {
border-left: #7b9ebd 1px solid;
padding-left: 2px;
border-right: #7b9ebd 1px solid;
padding-right: 2px;
border-top: #7b9ebd 1px solid;
padding-top: 2px;
border-bottom: #7b9ebd 1px solid;
padding-bottom: 2px;
font-size: 12px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
cursor: hand;
color: black;
}
PS：控件样式可根据具体需要自行修改.
控件源码在ImgPlayer.js文件中，代码如下:
/**
* 名称:ImgPlayer
* 用途:播放图片
* 描述:作为控件使用，可配置参数，支持自动播放、循环播放和时间设置等
* 设计:zhi.deng
* 邮箱:dz_005@163.com
* 日期:10 Sep 2009
*/
function ImgPlayer(){
var imgPlayer = this;
this.cur = 0; //当前图片索引
this.isAuto = false; //是否自动播放
this.isLoop = false; //是否循环播放
this.showMode = 0; //显示模式(0:全部;1:图片和描述;2:图片)
this.time = 3; //默认播放间隔时间
this.minWidth = 400; //图片最小宽度
this.minHeight = 300; //图片最小高度
this.imgWidth = this.minWidth; //图片宽度
this.imgHeight = this.minHeight;//图片高度
this.imgSrc = new Array(); //图片路径
this.divPlayer = document.createElement("div"); //播放器总区域
this.divScreen = document.createElement("div"); //播放器屏幕区域
this.divControl = document.createElement("div"); //播放器控制区域
this.divImage = document.createElement("div"); //图片显示区域
this.divDesc = document.createElement("div"); //图片描述区域
this.txtDesc = document.createElement("input"); //图片描述
this.btnPlay = document.createElement("button"); //播放按钮
this.btnStop = document.createElement("button"); //停止按钮
this.btnBack = document.createElement("button"); //上一页按钮
this.btnNext = document.createElement("button"); //下一页按钮
this.txtSecond = document.createElement("input"); //时间输出框
this.btnSet = document.createElement("button"); //时间设置按钮
/* 设置自动播放 */
this.setAuto = function(is){
this.isAuto=is;
}
/* 设置循环播放 */
this.setLoop = function(is){
this.isLoop=is;
}
/* 设置显示模式 */
this.setShowMode = function(mode){
this.showMode=mode;
}
/* 设置默认播放间隔时间 */
this.setTime = function(t){
this.time=t;
}
/* 设置图片宽度 */
this.setImgWidth = function(width){
this.imgWidth=width;
}
/* 设置图片高度 */
this.setImgHeight = function(height){
this.imgHeight=height;
}
/* 批量添加图片 */
this.addArray = function(imgArray){
for(var i=0;i<imgArray.length;i++){
this.add(imgArray[i]);
}
}
/* 添加单个图片 */
this.add = function(src){
this.imgSrc[this.imgSrc.length] = src;
}
/* 按钮显示控制 */
this.btnDisplay = function(){
//如果不循环，则到最后一张停止自动播放
if(this.cur==this.imgSrc.length-1&&!this.isLoop){
this.isAuto=false;
}
this.btnPlay.disabled=this.isAuto;
this.btnStop.disabled=!this.btnPlay.disabled;
this.btnBack.disabled=(this.cur==0);
this.btnNext.disabled=(this.cur==this.imgSrc.length-1);
}
/* 加载当前图片 */
this.load = function(){
this.btnDisplay();
if(this.cur>=0&&this.cur<=this.imgSrc.length-1){
var htmlStr = '<img src="' + this.imgSrc[this.cur]
+ '" width="' + this.imgWidth
+ '" height="' + this.imgHeight
+ '" style="border:1px solid #CCCCCC;">';
this.txtDesc.value=htmlStr;
this.divImage.innerHTML = htmlStr;
}
}
/* 加载指定图片以及一下张图片 */
this.loads = function(i){
if(i==this.imgSrc.length&&this.isLoop){
i=0;
}
if(i>=0&&i<=this.imgSrc.length-1&&this.isAuto){
this.cur=i;
this.load();
window.setTimeout(function(){
imgPlayer.loads(imgPlayer.cur+1);
},this.time*1000);
}
}
/* 启动自动播放 */
this.play = function(){
var i=(this.cur==this.imgSrc.length-1)?0:this.cur;
this.isAuto=true;
this.loads(i);
}
/* 结束自动播放 */
this.stop = function(){
this.isAuto=false;
this.btnDisplay();
}
/* 显示上一张并结束自动播放 */
this.back = function(){
this.isAuto=false;
if(this.cur-1 >= 0){
this.cur=this.cur-1;
this.load();
}
}
/* 显示下一张并结束自动播放 */
this.next = function(){
this.isAuto=false;
if(this.cur+1<=this.imgSrc.length-1){
this.cur=this.cur+1;
this.load();
}
}
/* 字符检测 */
this.isInteger = function(str){
var regu = /^[1-9][0-9]{0,}$/;
return regu.test(str);
}
/* 间隔时间设置 */
this.set = function(){
if (this.isInteger(this.txtSecond.value)){
this.time = this.txtSecond.value;
}else{
alert('提示：只能输入正整数！');
this.txtSecond.value=this.time;
this.txtSecond.select();
}
}
/* 绑定控件 */
this.bind = function(player){
if(this.showMode==2){
this.divPlayer.style.width=this.imgWidth;
this.divImage.style.height=this.imgHeight;
}else{
this.divPlayer.style.width=this.imgWidth>this.minWidth?this.imgWidth:this.minWidth;
this.divImage.style.height=this.imgHeight>this.minHeight?this.imgHeight:this.minHeight;
}
this.divPlayer.align="center";
this.divImage.style.width=this.divPlayer.style.width;
this.txtDesc.type="text";
this.txtDesc.size="65";
this.btnPlay.value="开始播放";
this.btnPlay.onclick=function(){
imgPlayer.play();
}
this.btnStop.value="暂停播放";
this.btnStop.onclick=function(){
imgPlayer.stop();
}
this.btnBack.value="上一张";
this.btnBack.onclick=function(){
imgPlayer.back();
}
this.btnNext.value="下一张";
this.btnNext.onclick=function(){
imgPlayer.next();
}
this.txtSecond.type="text";
this.txtSecond.value=this.time;
this.txtSecond.height="21";
this.txtSecond.size="2";
this.txtSecond.maxLength="2"
this.btnSet.value="设置时间";
this.btnSet.onclick=function(){
imgPlayer.set();
}
player.appendChild(this.divPlayer);
this.divPlayer.appendChild(this.divScreen);
this.divPlayer.appendChild(this.divControl);
this.divScreen.appendChild(this.divImage);
this.divScreen.appendChild(this.divDesc);
this.divDesc.appendChild(this.txtDesc);
this.divControl.appendChild(this.btnPlay);
this.divControl.appendChild(this.btnStop);
this.divControl.appendChild(this.btnBack);
this.divControl.appendChild(this.btnNext);
this.divControl.appendChild(this.txtSecond);
this.divControl.appendChild(this.btnSet);
if(this.showMode==1){//初始化显示模式
this.divControl.style.display="none";
}else if(this.showMode==2){
this.divControl.style.display="none";
this.divDesc.style.display="none";
}
//初始化播放模式
this.isAuto?this.play():this.load();
}
}
上面就是控件的核心代码了，都有中文注释，应该不难理解，如果有问题可以发eMail给我dz_005@163.com
转载请注明出处http://dengzhi.iteye.com/blog/466631
分享到：
相关推荐
qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集...
"C#自定义控件库"是指使用C#语言编写的、由开发者自定义的控件集合，这些控件可以扩展.NET Framework的标准控件集，为用户提供更丰富的界面元素和功能。自定义控件是软件开发中的一个重要环节，特别是在UI设计和用户...
在ASP.NET中，用户控件和自定义控件是两种重要的组件，它们扩展了.NET Framework的内置控件，帮助开发者创建具有特定功能和交互性的界面元素。 **用户控件(User Control)** 用户控件是ASP.NET中的基本自定义UI元素...
在C#编程中，动态改变控件的位置、大小以及实现拖动功能是常见的需求，尤其在设计用户界面（UI）时。以下将详细介绍如何通过C#实现这些功能，并结合提供的"Panel"控件来举例说明。 1. **控件位置的动态改变**： 在...
在VB6.0中，用户控件（User Control）和自定义控件（Custom Control）是两种非常重要的组件开发技术，它们允许开发者扩展Visual Basic的标准控件库，以满足特定项目的需求。通过创建用户控件和自定义控件，我们可以...
在VBA（Visual Basic for Applications）编程环境中，我们经常需要使用各种控件来增强用户界面的交互性。在WPS Office中，有时会遇到不同版本的内置控件不兼容的问题，比如日期控件和ListView控件。本教程将详细介绍...
Qt动态控件生成并布局Qt动态控件生成并布局Qt动态控件生成并布局Qt动态控件生成并布局Qt动态控件生成并布局Qt动态控件生成并布局Qt动态控件生成并布局Qt动态控件生成并布局Qt动态控件生成并布局Qt动态控件生成并布局...
在C#编程中，控件是构建用户界面（UI）的核心元素，它们允许用户与应用程序进行交互。本学习参考资料旨在帮助初学者理解并熟练掌握C#中的控件使用，从而创建功能丰富的桌面应用。以下是对C#控件的详细解释和相关知识...
在Windows Presentation Foundation (WPF) 中，查找一个控件下的子控件是常见的需求，特别是在进行数据绑定、事件处理或自定义控件操作时。WPF 提供了几种方法来实现这一目标，让我们深入探讨一下。 首先，我们可以...
在IT行业中，尤其是在工业自动化和监控系统开发领域，自定义控件扮演着至关重要的角色。本文将深入探讨“C#工业控件集合”，一个专为工业应用设计的自定义控件库，它包含了丰富的可视化元素，如图表、温度计和仪表盘...
### C# Winform遍历控件（窗体、Panel的子控件）Controls #### 一、概述 在Windows Forms (Winform) 开发中，窗体（Form）扮演着非常重要的角色，它是一个可以容纳多种控件的大容器。除了基本的控件如Button、...
在Windows Presentation Foundation (WPF) 中，开发人员可以创建丰富的用户界面，包括让控件具有拖放功能，允许用户自由调整控件的位置。本篇将深入探讨如何实现控件的拖动以及控件之间位置的交换，同时也会涉及到在...
首先，VB控件分为基本控件、ActiveX控件和自定义控件三类。基本控件是VB内置的，如按钮（Button）、文本框（TextBox）、标签（Label）、复选框（CheckBox）、单选按钮（RadioButton）等，它们满足了大多数常见应用的...
C#控件大全 C#控件大全是指C#语言中提供的所有控件的集合，包括窗体、按钮、文本框、列表框、组合框、checkbox、RadioButton、 label、ProgressBar、TextBox、RichTextBox、DataGridView、ListView、TreeView等。...
本教程将深入探讨如何使用C#.NET进行自定义控件的开发，特别关注用户控件和扩展控件的创建，以及如何实现文件上传功能。这对于初学者来说是一个很好的实践项目，因为它可以帮助理解控件的原理和自定义UI元素的方法。...
在Windows编程领域，遍历窗体中的所有控件是一项常见的任务，特别是在开发用户界面时，我们需要获取或操作界面上的各个元素。这个压缩包提供的源码实现了一个实用工具，允许用户通过输入窗体标题的部分字符来查找并...
工业控件，适用于vb工控编程的控件 简单易用
在Windows编程领域，MFC（Microsoft Foundation Classes）库提供了一系列的控件，使得开发者能够创建出功能丰富的用户界面。在本项目中，我们关注的是"树形控件（CTreeCtrl）"和"列表控件（CListCtrl）"的结合使用。...
**Qt控件集合详解** Qt是一款跨平台的C++图形用户界面应用程序开发框架，它提供了丰富的控件和API，使得开发者能够创建出美观且功能强大的应用程序。本集合中包含了一系列Qt编写的控件，既有开源作品也有原创设计，...