编写简易的大图播放器

picplay

这只是一个简易的播放器，可以做简单的应用，并了解播放器的算法。首先我们把页面构造出来。（html+css）直接上

1. html代码

<div class="asaindexmaindiv" id="indexmaindiv">
  <div class="asaindexmaindiv1 clearfix" >
    <div class="stylesgoleft" id="goleft"></div>
    <div class="asamaindiv1 " id="maindiv1">
      <ul id="count1">
        <li>
          <div class="playerdetail">
            <div class="detailimg"><img src="images/1.jpg" /></div>
            <a class="checkdetail" href="http://www.lanrenzhijia.com"></a> </div>
        </li>
        <li>
          <div class="playerdetail">
            <div class="detailimg"><img src="images/1.jpg" /></div>
            <a class="checkdetail" href="http://www.lanrenzhijia.com"></a> </div>
        </li>
        <li>
          <div class="playerdetail">
            <div class="detailimg"><img src="images/1.jpg" /></div>
            <a class="checkdetail" href="http://www.lanrenzhijia.com"></a> </div>
        </li>
        <li>
          <div class="playerdetail">
            <div class="detailimg"><img src="images/1.jpg" /></div>
            <a class="checkdetail" href="http://www.lanrenzhijia.com"></a> </div>
        </li>
      </ul>
    </div>
    <div class="stylesgoright" id="goright"></div>
  </div>
</div>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</div>

2. css代码

body{ padding:0; margin:0; font-family:"微软雅黑"; }
img{ border:0; margin:0; padding:0;}
ul, ol{list-style:none;margin:0px;padding:0px;}
li{list-style:none outside none;}
a{ text-decoration:none;}
div.asaindexmaindiv{height:600px;margin:0px auto;width:1400px; z-index:0;}
div.asaindexmaindiv1{margin-top:0px; overflow:hidden;position:relative;}
div.asaindexmaindiv1 div.stylesgoleft{float:left;width:20px;height:35px;background:url('picleft.gif') no-repeat;margin:280px 0px 0px 0px;cursor:pointer; position:absolute; left:50px; z-index:10;}
div.asaindexmaindiv1 div.stylesgoleft:hover{float:left;width:20px;height:35px;background:url('picleft.gif') no-repeat;margin:280px 0px 0px 0px;cursor:pointer; position:absolute; left:50px; z-index:10;}
div.asaindexmaindiv1 div.playerdetail{width:1400px;height:600px;background:#FFF;font-family:'微软雅黑';}
div.asaindexmaindiv1 div.playerdetail div.detailimg{width:1400px;height:600px;}
div.asaindexmaindiv1 div.playerdetail div.detailimg img{width:1400px;height:600px;}
div.asaindexmaindiv1 div.stylesgoright{float:left;width:20px;height:35px;background:url('picright.gif') no-repeat;margin:280px 0px 0px 0px;cursor:pointer; position:absolute; right:50px; z-index:10;}
div.asaindexmaindiv1 div.stylesgoright:hover{float:left;width:20px;height:35px;background:url('picright.gif') no-repeat;margin:280px 0px 0px 0px;cursor:pointer; position:absolute; right:50px; z-index:10;}
/*滚动*/
div.asamaindiv1{float:left;width:1400px;height:600px;overflow:hidden;position:relative;}
div.asamaindiv1 ul{position:absolute;left:0;top:0;}
div.asamaindiv1 ul li{float:left;width:1400px;height:600px;}

body{ padding:0; margin:0; font-family:"微软雅黑"; }

img{ border:0; margin:0; padding:0;}

ul, ol{list-style:none;margin:0px;padding:0px;}

li{list-style:none outside none;}

a{ text-decoration:none;}

div.asaindexmaindiv{height:600px;margin:0px auto;width:1400px; z-index:0;}

div.asaindexmaindiv1{margin-top:0px; overflow:hidden;position:relative;}

div.asaindexmaindiv1 div.stylesgoleft{float:left;width:20px;height:35px;background:url('picleft.gif') no-repeat;margin:280px 0px 0px 0px;cursor:pointer; position:absolute; left:50px; z-index:10;}

div.asaindexmaindiv1 div.stylesgoleft:hover{float:left;width:20px;height:35px;background:url('picleft.gif') no-repeat;margin:280px 0px 0px 0px;cursor:pointer; position:absolute; left:50px; z-index:10;}

div.asaindexmaindiv1 div.playerdetail{width:1400px;height:600px;background:#FFF;font-family:'微软雅黑';}

div.asaindexmaindiv1 div.playerdetail div.detailimg{width:1400px;height:600px;}

div.asaindexmaindiv1 div.playerdetail div.detailimg img{width:1400px;height:600px;}

div.asaindexmaindiv1 div.stylesgoright{float:left;width:20px;height:35px;background:url('picright.gif') no-repeat;margin:280px 0px 0px 0px;cursor:pointer; position:absolute; right:50px; z-index:10;}

div.asaindexmaindiv1 div.stylesgoright:hover{float:left;width:20px;height:35px;background:url('picright.gif') no-repeat;margin:280px 0px 0px 0px;cursor:pointer; position:absolute; right:50px; z-index:10;}

/*滚动*/

div.asamaindiv1{float:left;width:1400px;height:600px;overflow:hidden;position:relative;}

div.asamaindiv1 ul{position:absolute;left:0;top:0;}

div.asamaindiv1 ul li{float:left;width:1400px;height:600px;}

运行后的页面效果就出来了，但是还不能播放我们后面的图片： picplay

3. 下面是javascript代码，以便让呆板的页面图片动起来

<script type="text/javascript">
window.onload = function () {
	var oBtnLeft = document.getElementById("goleft");
	var oBtnRight = document.getElementById("goright");
	var oDiv = document.getElementById("indexmaindiv");
	var oDiv1 = document.getElementById("maindiv1");
	var oUl = oDiv.getElementsByTagName("ul")[0];
	var aLi = oUl.getElementsByTagName("li");
	var now = -aLi[0].offsetWidth;
	oUl.style.width = aLi.length * (aLi[0].offsetWidth) + 'px';
	oBtnRight.onclick = function () {
		var n = Math.floor((aLi.length * (aLi[0].offsetWidth) + oUl.offsetLeft) / aLi[0].offsetWidth);

		if (n <= 1) {
			move(oUl, 'left', 0);
		}
		else {
			move(oUl, 'left', oUl.offsetLeft + now);
		}
	}
	oBtnLeft.onclick = function () {
		var now1 = -(aLi.length-1) * aLi[0].offsetWidth;

		if (oUl.offsetLeft >= 0) {
			move(oUl, 'left', now1) ;
		}
		else {
			move(oUl, 'left', oUl.offsetLeft - now);
		}
	}
	var timer = setInterval(oBtnRight.onclick, 5000);
	oDiv.onmouseover = function () {
		clearInterval(timer);
	}
	oDiv.onmouseout = function () {
		timer = setInterval(oBtnRight.onclick, 5000);
	}

};

function getStyle(obj, name) {
	if (obj.currentStyle) {
		return obj.currentStyle[name];
	}
	else {
		return getComputedStyle(obj, false)[name];
	}
}

function move(obj, attr, iTarget) {
	clearInterval(obj.timer)
	obj.timer = setInterval(function () {
		var cur = 0;
		if (attr == 'opacity') {
			cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
		}
		else {
			cur = parseInt(getStyle(obj, attr));
		}
		var speed = (iTarget - cur) / 6;
		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
		if (iTarget == cur) {
			clearInterval(obj.timer);
		}
		else if (attr == 'opacity') {
			obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
			obj.style.opacity = (cur + speed) / 100;
		}
		else {
			obj.style[attr] = cur + speed + 'px';
		}
	}, 30);
}  
</script>

window.onload = function () {

var oBtnLeft = document.getElementById("goleft");

var oBtnRight = document.getElementById("goright");

var oDiv = document.getElementById("indexmaindiv");

var oDiv1 = document.getElementById("maindiv1");

var oUl = oDiv.getElementsByTagName("ul")[0];

var aLi = oUl.getElementsByTagName("li");

var now = -aLi[0].offsetWidth;

oUl.style.width = aLi.length * (aLi[0].offsetWidth) + 'px';

oBtnRight.onclick = function () {

var n = Math.floor((aLi.length * (aLi[0].offsetWidth) + oUl.offsetLeft) / aLi[0].offsetWidth);

if (n <= 1) {

move(oUl, 'left', 0);

}

else {

move(oUl, 'left', oUl.offsetLeft + now);

}

oBtnLeft.onclick = function () {

var now1 = -(aLi.length-1) * aLi[0].offsetWidth;

if (oUl.offsetLeft >= 0) {

move(oUl, 'left', now1) ;

}

else {

move(oUl, 'left', oUl.offsetLeft - now);

}

var timer = setInterval(oBtnRight.onclick, 5000);

oDiv.onmouseover = function () {

clearInterval(timer);

}

oDiv.onmouseout = function () {

timer = setInterval(oBtnRight.onclick, 5000);

}

};

function getStyle(obj, name) {

if (obj.currentStyle) {

return obj.currentStyle[name];

}

else {

return getComputedStyle(obj, false)[name];

}

function move(obj, attr, iTarget) {

clearInterval(obj.timer)

obj.timer = setInterval(function () {

var cur = 0;

if (attr == 'opacity') {

cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);

}

else {

cur = parseInt(getStyle(obj, attr));

}

var speed = (iTarget - cur) / 6;

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if (iTarget == cur) {

clearInterval(obj.timer);

}

else if (attr == 'opacity') {

obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';

obj.style.opacity = (cur + speed) / 100;

}

else {

obj.style[attr] = cur + speed + 'px';

}

}, 30);

}

</script>

4.还没完哦，修复一下小bug

你试着运行看到了一个表面很棒的简易播放器，你试着点击左右按钮，很不错。但是你快速点击左右播放按钮时：

picplayd

你会发现，我了个去有点乱。

问题出现在你还没有执行完播放效果，你又点击了一下，之前的效果播放了一半就有进行新的循环，所以导致计算错误。处理方式，判断他是否执行完成，如果完成再进行播放。

<script type="text/javascript">
window.onload = function () {
	var oBtnLeft = document.getElementById("goleft");
	var oBtnRight = document.getElementById("goright");
	var oDiv = document.getElementById("indexmaindiv");
	var oDiv1 = document.getElementById("maindiv1");
	var oUl = oDiv.getElementsByTagName("ul")[0];
	var aLi = oUl.getElementsByTagName("li");
	var now = -aLi[0].offsetWidth;
	oUl.style.width = aLi.length * (aLi[0].offsetWidth) + 'px';
	oBtnRight.onclick = function () {
		//var n = Math.floor((aLi.length * (aLi[0].offsetWidth) + oUl.offsetLeft) / aLi[0].offsetWidth);
		var n = (aLi.length * (aLi[0].offsetWidth) + oUl.offsetLeft) / aLi[0].offsetWidth;
        if(parseInt(n)==n){
			
		if (n <= 1) {
			move(oUl, 'left', 0);
		}
		else {
			move(oUl, 'left', oUl.offsetLeft + now);
		}
		}
	}
	oBtnLeft.onclick = function () {
		var n = (aLi.length * (aLi[0].offsetWidth) + oUl.offsetLeft) / aLi[0].offsetWidth;
		if(parseInt(n)==n){
		var now1 = -(aLi.length-1) * aLi[0].offsetWidth;

		if (oUl.offsetLeft >= 0) {
			move(oUl, 'left', now1) ;
		}
		else {
			move(oUl, 'left', oUl.offsetLeft - now);
		}
		}
	}
	var timer = setInterval(oBtnRight.onclick, 5000);
	oDiv.onmouseover = function () {
		clearInterval(timer);
	}
	oDiv.onmouseout = function () {
		timer = setInterval(oBtnRight.onclick, 5000);
	}

};

function getStyle(obj, name) {
	if (obj.currentStyle) {
		return obj.currentStyle[name];
	}
	else {
		return getComputedStyle(obj, false)[name];
	}
}

function move(obj, attr, iTarget) {
	clearInterval(obj.timer)
	obj.timer = setInterval(function () {
		var cur = 0;
		if (attr == 'opacity') {
			cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
		}
		else {
			cur = parseInt(getStyle(obj, attr));
		}
		var speed = (iTarget - cur) / 6;
		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
		if (iTarget == cur) {
			clearInterval(obj.timer);
		}
		else if (attr == 'opacity') {
			obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
			obj.style.opacity = (cur + speed) / 100;
		}
		else {
			obj.style[attr] = cur + speed + 'px';
		}
		
		
	}, 30);
}  
</script>

window.onload = function () {

var oBtnLeft = document.getElementById("goleft");

var oBtnRight = document.getElementById("goright");

var oDiv = document.getElementById("indexmaindiv");

var oDiv1 = document.getElementById("maindiv1");

var oUl = oDiv.getElementsByTagName("ul")[0];

var aLi = oUl.getElementsByTagName("li");

var now = -aLi[0].offsetWidth;

oUl.style.width = aLi.length * (aLi[0].offsetWidth) + 'px';

oBtnRight.onclick = function () {

//var n = Math.floor((aLi.length * (aLi[0].offsetWidth) + oUl.offsetLeft) / aLi[0].offsetWidth);

var n = (aLi.length * (aLi[0].offsetWidth) + oUl.offsetLeft) / aLi[0].offsetWidth;

if(parseInt(n)==n){

if (n <= 1) {

move(oUl, 'left', 0);

}

else {

move(oUl, 'left', oUl.offsetLeft + now);

}

oBtnLeft.onclick = function () {

var n = (aLi.length * (aLi[0].offsetWidth) + oUl.offsetLeft) / aLi[0].offsetWidth;

if(parseInt(n)==n){

var now1 = -(aLi.length-1) * aLi[0].offsetWidth;

if (oUl.offsetLeft >= 0) {

move(oUl, 'left', now1) ;

}

else {

move(oUl, 'left', oUl.offsetLeft - now);

}

var timer = setInterval(oBtnRight.onclick, 5000);

oDiv.onmouseover = function () {

clearInterval(timer);

}

oDiv.onmouseout = function () {

timer = setInterval(oBtnRight.onclick, 5000);

}

};

function getStyle(obj, name) {

if (obj.currentStyle) {

return obj.currentStyle[name];

}

else {

return getComputedStyle(obj, false)[name];

}

function move(obj, attr, iTarget) {

clearInterval(obj.timer)

obj.timer = setInterval(function () {

var cur = 0;

if (attr == 'opacity') {

cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);

}

else {

cur = parseInt(getStyle(obj, attr));

}

var speed = (iTarget - cur) / 6;

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if (iTarget == cur) {

clearInterval(obj.timer);

}

else if (attr == 'opacity') {

obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';

obj.style.opacity = (cur + speed) / 100;

}

else {

obj.style[attr] = cur + speed + 'px';

}

}, 30);

}

</script>

ok，有点意思了，运行看看吧。

记录前端html5和css3.0技术

编写简易的大图播放器

发表评论取消回复

发表评论 取消回复

发表评论取消回复