JavaScript 之仿flash播放器

最新推荐文章于 2021-06-03 04:59:59 发布

菜鸟的编程梦_

最新推荐文章于 2021-06-03 04:59:59 发布

阅读量442

点赞数

分类专栏： JS 文章标签： javascript 仿flash播放器 js应用

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

move.js文件

function getStyle(obj, name)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[name];  
    }else
    {
        return getComputedStyle(obj, false)[name];  
    }
}
//var alpha = 30;
function startMove(obj, arr, iTarget)
{
    clearInterval(obj.timer);

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

            //  document.getElementById('tex1').value = obj.style.opacity;
            }else
            {
            obj.style[arr]=cur+speed+'px';  
            }
        }
        }, 30);
}

// JavaScript Document

仿flash播放器（引用上面的js文件）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿FLASH的图片轮换效果</title>
<script src="move.js"></script>
<style>
    @charset "utf-8";
/* CSS Document */

body { background-color: #F0F0F0; } ul { padding: 0; margin: 0;} li { list_style: none; } img { border: 0; }

.play { width: 400px; height: 430px; margin: 50px auto 0; background-color: #000000; font: 12px Arial; }

.big_pic { width: 400px; height: 320px; overflow: hidden;background: #222; position: relative; }

.big_pic li { width: 400px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; }

.mark_left { width: 200px; height: 320px; position:absolute; left: 0; top: 0;  filter: alpha(opacity:10); opacity: 0.1; z-index:3000; }

.mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0;  filter: alpha(opacity:10); opacity: 0.1; z-index: 3000; }

.big_pic .prev { width: 60px; height: 60px; background:url(images/btn.png) no-repeat; position: absolute; top: 130px; left: 10px; z-index: 3001; filter:alpha(opacity:0); opacity:0; cursor:pointer; }

.big_pic .next { width: 60px; height:60px; background:url(images/btn2.png) no-repeat 0;

 position: absolute; top: 130px; right: 10px; z-index: 3001; filter:alpha(opacity:0); opacity:0; cursor: pointer: }

.big_pic .text { position:absolute; left: 10px; top:302px; z-index:3000; color: #ccc; }
.big_pic .length { position:absolute; right: 10px; bottom: 4px; z-index:3000; color:#ccc; }
.big_pic .bg { width:400px; height: 25px; background: #000; filter:alpha(opacity=60); opacity: 0.6; position: absolute; z-index:2999; bottom: 0; left:0; }
.small_pic {width:380px; height:94px; position:relative; top:7px; left:10px; overflow: hidden; }
.small_pic ul { height:94px; position:absolute; top: 0; left: 0; }
.small_pic li { width: 120px; height: 94px; float: left; 
padding-right: 10px; background: url(images/loading.gif) no-repeat center center; cursor: pointer; filter: alpha(opacity:30); opacity:0.3; }
.small_pic img { width: 120px; height:94px; }

</style>
<script>
function getByClass(oParent, sClass)
{
    var aEle=oParent.getElementsByTagName('*');
    var aResult=[];

    for(var i=0;i<aEle.length;i++)
    {
        if(aEle[i].className==sClass)
        {
            aResult.push(aEle[i]);
        }
    }
    return aResult;
}


window.onload=function()
{
    var oDiv=document.getElementById('playimages');
    var oBtnPrev=getByClass(oDiv, 'prev')[0];
    var oBtnNext=getByClass(oDiv, 'next')[0];
    var oMarkLeft=getByClass(oDiv, 'mark_left')[0];
    var oMarkRight=getByClass(oDiv, 'mark_right')[0];
    //var oDivSmall=document.getElementById('small_pic');
    var oDivSmall=getByClass(oDiv, 'small_pic')[0];
    var oUlSmall=oDivSmall.getElementsByTagName('ul')[0];
    var aLiSmall=oDivSmall.getElementsByTagName('li');


    var oUlBig=getByClass(oDiv, 'big_pic')[0];
    var aLiBig=oUlBig.getElementsByTagName('li');


    var nowZIndex=2;
    var now=0;
    oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+'px';

    //左右按钮
    oBtnPrev.onmouseover =oMarkLeft.onmouseover=function ()
    {
        startMove(oBtnPrev, 'opacity', 100);

    };
    oBtnPrev.onmouseout =oMarkLeft.onmouseout=function ()
    {
        startMove(oBtnPrev, 'opacity', 0);  
    };
    oBtnNext.onmouseover=oMarkRight.onmouseover=function ()
    {
        startMove(oBtnNext, 'opacity', 100);    
    };
    oBtnNext.onmouseout=oMarkRight.onmouseout=function ()
    {
        startMove(oBtnNext, 'opacity', 0);  
    };
    //大图切换
    for(var i=0;i<aLiSmall.length;i++)
    {
        aLiSmall[i].index=i;
        aLiSmall[i].onclick=function ()
        {
            if(this.index==now)return;
            now=this.index;
            tab();


        }
        aLiSmall[i].onmouseover=function ()
        {
            startMove(this, 'opacity', 100);    
        };
        aLiSmall[i].onmouseout=function ()
        {
            if(this.index!=now)
            {
                startMove(this, 'opacity', 30); 
            }
        };
    }

    function tab()
    {
             aLiBig[now].style.zIndex=nowZIndex++;

            for(var i=0;i<aLiSmall.length;i++)
            {
                startMove(aLiSmall[i], 'opacity', 30);  
            }

            aLiBig[now].style.height=0;
            startMove(aLiBig[now], 'height', 320);
            startMove(aLiSmall[now], 'opacity', 100);
            if(now==0)
            {
                startMove(oUlSmall, 'left', 0);
            }else if(now==aLiSmall.length-1)
            {
                startMove(oUlSmall, 'left', -(now-2)*aLiSmall[0].offsetWidth);
            }else
            {
                startMove(oUlSmall, 'left', -(now-1)*aLiSmall[0].offsetWidth);
            }
    }
    oBtnPrev.onclick=function ()
    {
        now--;
        if(now==-1)
        {
            now=aLiSmall.length-1;
        }
        tab();
    }
    oBtnNext.onclick=function ()
    {
        now++;
        if(now==aLiSmall.length)
        {
            now=0;  
        }
        tab();
    };
    var timer=setInterval(oBtnNext.onclick, 2000);
    oDiv.onmouseover=function ()
    {
        clearInterval(timer);
    };
    oDiv.onmouseout=function ()
    {
        timer=setInterval(oBtnNext.onclick, 2000);
    };
};
</script>
</head>
<body>
<div id="playimages" class="play">

    <ul class="big_pic">

        <div class="prev"></div>
        <div class="next"></div>

        <div class="text">加载图片说明......</div>
        <div class="length">计算图片数量......</div>

        <a class="mark_left" href="javascript:;"></a>
        <a class="mark_right" href="javascript:;"></a>
        <div class="bg"></div>

        <li style="z-index:1;"><img src="13_07.jpg" /></li>
        <li><img src="pay.png" /></li>
        <li><img src="默认配置文件位置.PNG" /></li>
        <li><img src="pay.png" /></li>
        <li><img src="13_07.jpg" /></li>
        <li><img src="pay.png" /></li>
    </ul>

    <div id="small_pic" class="small_pic">
        <ul style="width:400px;">
            <li style=" filter: alpha(opacity:100); opacity:1;"><img src="13_07.jpg" /></li>
            <li><img src="pay.png" /></li>
            <li><img src="默认配置文件位置.PNG" /></li>
            <li><img src="pay.png" /></li>
            <li><img src="13_07.jpg" /></li>
            <li><img src="pay.png" /></li>
        </ul>       
    </div>
</div>
</body>
</html>