前端作品四之——影评播放器

1、功能概述

　　自动播放，底部小图轮回切换，上部大图相应得切换。鼠标移入移出，底部小图透明度淡入淡出，通过方向键控制播放方向。底部的图片的轮回切换其实是套用了，之前一篇博客的轮回播放思想。

2、选材布局

　　相当于将上一篇中的布局分为上下两部分，而且通过设设置div的宽度，显示ul的一部分。

3、功能实现

　　运动框架的运用，以及设置一个参数，通过改变小图来切换大图，length/2-2，now=2，这两句代码在这里和之前的不一样，不过大致远离差不多，得要灵活运用。

<!DOCTYPE html >
<html>
<head>
<!-- 敲者ChenZz~ -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="hb_style.css">
<script src="move.js"></script>
<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=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', 60);
            }
        };
    }
    
    function tab()
    {
        aLiBig[now].style.zIndex=nowZIndex++;
        
        for(var i=0;i<aLiSmall.length;i++)
        {
            startMove(aLiSmall[i], 'opacity', 60);
        }
        
        startMove(aLiSmall[now], 'opacity', 100);
        
        aLiBig[now].style.height=0;
        startMove(aLiBig[now], 'height', 320);
        
        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/2+2)
        {
            oUlSmall.style.left='0';

            now=2;
        }
        
        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>

        
        <a class="mark_left" href="javascript:;"></a>
        <a class="mark_right" href="javascript:;"></a>
        <div class="bg"></div>
        
        <li style="z-index:1;"><a href="http://www.yp136.com/archives/6118"><img src="images/1.jpg" /></a></li>
        <li><a href="http://www.yp136.com/archives/6195"><img src="images/2.jpg" /></a></li>
        <li><a href="http://www.yp136.com/archives/6207"><img src="images/3.jpg" /></a></li>
        <li><a href="http://www.yp136.com/archives/6149"><img src="images/4.jpg" /></a></li>
        <li><a href="http://www.yp136.com/archives/6154"><img src="images/5.jpg" /></a></li>
        <li><a href="http://www.yp136.com/archives/6118"><img src="images/1.jpg" /></a></li>
        <li><a href="http://www.yp136.com/archives/6195"><img src="images/2.jpg" /></a></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
        <li><img src="images/5.jpg" /></li>
    </ul>
    <div class="small_pic">
        <ul style="width:390px;">
            <li style="filter: 100; opacity: 1;"><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            <li><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
        </ul>
    </div>
</div>

</body>
</html>

运动框架move.js

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

function startMove(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(cur==iTarget)
        {
            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);
}

CSS样式

body { background: #666; } ul { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; }

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

.big_pic { width: 400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc; background: #222; position: relative; }
.big_pic li { width: 400px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; background: url(images/loading.gif) no-repeat center center; }

.mark_left { width: 50px; height: 320px; position: absolute; left: 0; top: 0; background: red; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.mark_right { width: 50px; height: 320px; position: absolute; left: 200px; top: 0; background: green; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.big_pic .prev { width: 60px; height: 60px; background: url(images/btn.gif) 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/btn.gif) no-repeat 0 -60px; 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: 3001; color: #ccc; }
.big_pic .length { position: absolute; right: 10px; bottom: 4px; z-index: 3001; 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=60); opacity: 0.6; }
.small_pic img { width: 120px; height: 94px; }

View Code

posted @ 2015-10-22 22:49 ChenZz~ 阅读(258) 评论(0) 收藏举报

刷新页面返回顶部

ChenZz~

前端作品四之——影评播放器

公告