ImgPlayer控件
胡鸿羲
最近在学习JavaScript，试着写了一个图片播放器。
其实网上已经有各种各样的图片播放器了，我这个写得也不好，原理和别人的也差不多，就当作练习好了，希望能给初学者提供一点帮助！
简单介绍：ImgPlayer控件，可配置参数，支持自动播放、循环播放、显示设置和时间设置等。
使用方法：在html中创建一个（或多个）控件实例，与div（或td）绑定，代码如下：
ImgPlayer控件效果图：
[img]http://dl.iteye.com/upload/picture/pic/44021/9cae7da3-ffde-3697-a140-0ac2edec2256.jpg[/img]
上面效果是采用控件默认配置，我们也可以自定义参数如：
ImgPlayer.css文件代码如下：
控件源码在ImgPlayer.js文件中，代码如下:
上面就是控件的核心代码了，都有中文注释，应该不难理解，如果有问题可以发eMail给我dz_005@163.com
[color=red]转载请注明出处http://dengzhi.iteye.com/blog/466631[/color]
其实网上已经有各种各样的图片播放器了，我这个写得也不好，原理和别人的也差不多，就当作练习好了，希望能给初学者提供一点帮助！
简单介绍：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控件效果图：
[img]http://dl.iteye.com/upload/picture/pic/44021/9cae7da3-ffde-3697-a140-0ac2edec2256.jpg[/img]
上面效果是采用控件默认配置，我们也可以自定义参数如：
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;
}
控件源码在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
[color=red]转载请注明出处http://dengzhi.iteye.com/blog/466631[/color]
类似资料：