前端作品三之——轮回滚动电影海报

1、功能概述

　　通过HTML、CSS3、javascript语言编写的一个能自动播放的图片轮回滚动的图片播放器。鼠标自动播放时，每播放一张图片的距离就暂停1s。当我们鼠标移进海报图片时播放停止，鼠标移出播放继续。当鼠标移至左右按钮时，图片播放方向改变，按钮颜色也变成紫色，鼠标移出则恢复正常。总共选了四张电影海报图片，加上一张按钮图片。

2、选材布局

　　选择了四张电影海报的图片，和一个包含四个方向按钮的图片。将图片并排居中显示在页面上，将包含方向按钮的<a>标签大小设置成只能容纳一个按钮，其他部分隐藏

3、功能实现

　　将包含四张电影图片的ul的innerHTML变成两倍。这样就有8张图片，当ul的offsetLeft小于等于-oUl.style.Width/2时，将offsetLeft赋值0；当ul的offsetLeft大于等于0时，将offsetLeft赋值-oUl.style.Width/2。

　　创建一个doMove()函数，使图片每秒以width=offsetLeft+speed的速度运动，并在里面设置setTimeOut定时器每播放一张图片的距离，暂停一秒。定义一个speed变量来控制滚动速度，通过判断哪个按钮来确定speed正负，如此达到图片向左走，向右走的效果。

　　创建startMove()函数，判断图片移动方向，并设置定时器，每30ms，运行doMove()。并创建stopMove()函数来在需要的时候清除doMove里的定时器。

　　当鼠标移入ul时，调用stopMove()，移出则重新调用startMove。鼠标移入移出按钮时，设置一个变量，通过函数传参来控制startMove(moveLeft)，判断moveLeft真假，来决定speed正负。

　　感觉功能的确表述的多而且混乱，之后还是得理清楚，应该会有更好解释、逻辑性更好的方式。

<!doctype html>
<html>
<head>
<!-- 敲者:ChenZz~ -->
<meta charset="utf-8">
<title>滚动电影海报</title>
<link href="gd_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="gd.js">
</script>
</head>
<body>
<div class="roll" id="roll">
    <a href="javascript:void(0);" class="btn_left"></a>
    <a href="javascript:void(0);" class="btn_right"></a>
    <div class="wrap">
        <ul>
            <li><a href="http://movie.douban.com/subject/1866473/?from=showing"><img src="images/1.jpg" /></a></li>
            <li><a href="http://movie.douban.com/subject/25964071/?from=showing"><img src="images/2.jpg" /></a></li>
            <li><a href="http://movie.douban.com/subject/20645098/?from=showing"><img src="images/3.jpg" /></a></li>
            <li><a href="http://movie.douban.com/subject/25800699/?from=showing"><img src="images/4.jpg" /></a></li>
        </ul>
    </div>
</div>
</body>
</html>

var moveLeft=true;
var gTimer=null;
var gTimerOut=null;
var speed=2;

window.onload=function ()
{
    var oDiv=document.getElementById('roll');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var aLi=oUl.getElementsByTagName('li');
    var aA=oDiv.getElementsByTagName('a');    
    var i=0;
    
    var str=oUl.innerHTML+oUl.innerHTML;
    
    oUl.innerHTML=str;
    
    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
    
    for(i=0;i<aLi.length;i++)
    {
        aLi[i].onmouseover=function ()
        {
            stopMove();
        };
        
        aLi[i].onmouseout=function ()
        {
            startMove(moveLeft);
        };
    }
    
    aA[0].onmouseover=function ()
    {
        startMove(true);
    };
    
    aA[1].onmouseover=function ()
    {
        startMove(false);
    };
    
    startMove(true);    
    
};

function startMove(bLeft)
{
    moveLeft=bLeft;
    
    if(gTimer)
    {
        clearInterval(gTimer);
    }
    gTimer=setInterval(doMove, 30);
}

function stopMove()
{
    clearInterval(gTimer);
    gTimer=null;
}

function doMove()
{
    var oDiv=document.getElementById('roll');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var aLi=oUl.getElementsByTagName('li');
    
    var l=oUl.offsetLeft;
    
    if(moveLeft)
    {
        l-=speed;
        if(l<=-oUl.offsetWidth/2)
        {
            l=0;
        }
    }
    else
    {
        l+=speed;
        if(l>=0)
        {
            l=-oUl.offsetWidth/2;
        }
    }
    

    if(Math.abs(l-Math.round(l/aLi[0].offsetWidth)*aLi[0].offsetWidth)<Math.ceil(speed/2))
    {
        stopMove();
        gTimerOut=setTimeout
        (
            function ()
            {
                startMove(moveLeft);
            }, 1000
        );
        
        l=Math.round(l/aLi[0].offsetWidth)*aLi[0].offsetWidth;
    }
    
    oUl.style.left=l+'px';
}

* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: 0; }

.roll { width: 880px; height: 200px; margin: 50px auto 0; position: relative; }
.btn_left { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat -70px -69px; position: absolute; top: 66px; left: 0px; z-index: 1; }
.btn_left:hover { background: url(images/btn.jpg) no-repeat -70px 0; }
.btn_right { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat 1px -69px; position: absolute; top: 66px; right: 0; z-index: 1; }
.btn_right:hover { background: url(images/btn.jpg) no-repeat 1px 0; }
.roll .wrap { width: 728px; height: 200px; margin: 0 auto; position: relative; overflow: hidden; }
.roll ul { position: absolute; top: 0; left: 0; }
.roll li { float: left; width: 182px; height: 200px; text-align: center; }
.roll li a:hover { position: relative; top: 2px; }

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

刷新页面返回顶部

ChenZz~

前端作品三之——轮回滚动电影海报

公告