仿flash的图片轮换播放器

我去下载了老师的资料，他给了move.js的模块还有css布局的模块，然后我们就在demo里引进这两个文件，并且在script里自己编写。

初始状态就是这样的：

，我们要做的就是鼠标移到图片上的时候会有左右的箭头，并且点击能切换图片。

先用之前学过的getByClass来获取一下所有元素。

然后开始正式的步骤 ，在window.onload中，先把鼠标移入出现的箭头做出来：

我们要先知道，鼠标移到的其实不是图片上，而是在图片上面有一层遮罩，也就是这两个div

，当我们改变这两个div的css中的opcity透明度可以发现这个遮罩将图片分成了两边，当鼠标移到某一边时，某一边的箭头就出现。

 

按照上面那样的写法，当鼠标移到箭头上时，会发现箭头消失了，这是因为遮罩的层级大于箭头的层级，想要点到按钮，按钮的层级就一定要比遮罩的高。只需要添加一个按钮移入的效果就可以了。

同理右边的箭头：

 

然后做大图切换：

要让大图从上往下显示，就要先把高度设成0，然后通过startMove将高度慢慢变大。

除此之外还有一个问题就是如果多次点击同一张图片的话 他会反复的切换，图片一直从上往下显示，这样很难看，应该是重复点击图片没有反应的，所以先定义一下，再在for循环中加入： 这样就解决了

 

 

当鼠标移到某张小图上时，这张小图透明度就变深（这个操作也是在for循环里的）

 

 

完整代码：

 

这样就基本完成了，然后要做点击按钮切换图片的功能了

先把两个按钮的功能写好：

然后把一下框出来的地方换成now：

换成如下的：

 

然后把这一段复制后删掉，重新封装成一个独立的函数tab（）并将其加入到刚才删掉的那一段里，

然后在oBtnNext中也加入tab（）

 

测试一下没有问题，然后在oBtnPrev中也类似

 

这样按钮的功能就做好了

接下来做底下小图的滚动，因为一共有5张图，而底下只显示了3张图，当下一张是第四张图的时候，要让小图向后滚一张。

先在定义块中定义一下：

然后在tab中写：

 

这样就基本完成了，再添加一些小功能，比如让他自己滚动，当鼠标移入时停止滚动：

全部完成

 

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)
            {
                now=0;
            }
            tab();
        }

        var timer=setInterval(oBtnNext.onclick,2000);
        oDiv.onmouseover=function()
        {
            clearInterval(timer);
        }
        oDiv.onmouseout=function()
        {
            timer=setInterval(oBtnNext.onclick,2000);
        }

    }
</script>

 

其余的css，move.js框架都在U盘里