ImgPlayer控件
最近在学习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控件效果图：
http://dl.iteye.com/upload/picture/pic/44021/9cae7da3-ffde-3697-a140-0ac2edec2256.jpg
上面效果是采用控件默认配置，我们也可以自定义参数如：
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);}}/* 添加单个图片 */this.add = function(src){this.imgSrc = 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 + '" 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 = /^{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
页:
[1]