【JavaScript从入门到精通】第十八课 JS运动应用-02

此内容来自开课吧石川微信公众号

上节课我们已经搭建了一个比较完善的多物体运动框架,这节课我们将对其进行再扩充。

仿Flash图片展示-1

仿Flash图片展示的具体效果如下:

【JavaScript从入门到精通】第十八课 JS运动应用-02

【JavaScript从入门到精通】第十八课 JS运动应用-02

鼠标移动到上方图片左边和右边时,都会出现对应的箭头,移动到下方小图的时候会有淡入淡出的效果。点击箭头,图片会发生变化,下方的小图也会发生滚动。当点到最后一张图之后再点击右箭头,图片会回到第一张。这个效果总体来说比较复杂,我们一步一步进行讲解。这里,我们新建一个js文件,并将我们前面的多物体运动框架放入文件中,当我们需要运动的时候,直接使用该文件即可。页面的整体布局如下:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>
        仿FLASH的图片轮换效果/title&gt;
    </title>
</head>
<body>
<div id="playimages" class="play">
    <ul class="big_pic">
        <li style="list-style: none; display: inline">
            <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>
        <li style="z-index: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/6.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/6.jpg"/></li>
        </ul>
    </div>
</div>
</body>
</html>

 

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: 200px; height: 320px; position: absolute; left: 0; top: 0; background: red; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.mark_right { width: 200px; 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: 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=60); opacity: 0.6; }
.small_pic img { width: 120px; height: 94px; }

在这个布局里,我们用于切换图片的按钮是prev和next两个div。正常情况下,我们将它们的opacity设置为0。为了实现鼠标在左边时,左边出现箭头,鼠标在右边时,右边出现箭头,我们将整张图片切分为2个a(mark_left和mark_right)。我们通过前面封装好的getByClass函数可以获取它们的样式,并通过startMove函数控制其出现和消失。当然,为了避免点不到按钮,按钮的层级需要比a标签高,这会导致移动到按钮的时候按钮就消失了,因此我们需要采取和前面延时显示一样的工作。

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];
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);
};

设计好按钮后,我们还需要设计大图切换的功能。为了使大图显示出来,我们需要将其的层级放到最高之后再执行动画效果。

var now = 0;
var nowZIndex = 2;
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');
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);
}

每次点击的时候,我们都让该nowZIndex+1,这样出现的图片必然会在最上层。我们通过startMove函数可以实现从上到下的刷新效果,同时为了避免点击同一图片的时候重复刷新,我们引入了一个now变量,当点击同一图片时让now就等于当前index,这样就不会刷新了。

此外,在tab函数里,for循环的作用与选项卡里的类似,我们先将所有下方图片均变为透明,再将当前图片的opacity变为100即可。同时在移出的时候,我们需要进行一下检测:如果移出的图片是当前张,不需要将其变为透明。

最后,我们来实现上一张-下一张和下方图片同步切换的功能。

oBtnPrev.onclick=function ()
{
    now--;
    if(now==-1)
    {
        now=aLiSmall.length-1;
    }
    tab();
};
oBtnNext.onclick=function ()
{
    now++;
    if(now==aLiSmall.length)
    {
        now=0;
    }
    tab();
};

当now已经等于了图片数量的时候,我们将now重新归零。接下来我们需要进行的操作和前面一样,点击后进行图片切换,因此我们在前面封装好一个tab函数进行使用。同时为了实现下方图片同步切换滚动,我们需要加入下列代码到tab函数中:

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);
}

当然,这里我们需要对图片是否为第一张或者最后一张进行判断。

最后,为了实现图片自动滚动,我们理所当然地需要加入一个定时器:

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

定时器的执行函数,当鼠标移入整个div时停止定时器,移出时开始定时器,同时设置定时器的函数为oBtnNext就可以进行轮播了。

如需转载,烦请注明出处:https://www.qdskill.com/javascript/556.html

发表评论

登录后才能评论