Javascript运动 各个运动bug以及仿Flash的图片轮换实例

于 2017-03-12 23:42:19 发布
阅读量533 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Suoz_wly0710/article/details/61703702
版权

52-js.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js运动实例-仿FLASH的图片轮换效果</title>
    <link rel="stylesheet" type="text/css" href="52-js.css">
    <script type="text/javascript" src="52-js.js"></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="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>

52-js.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: 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; opacity: 0; filter: alpha(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;  opacity: 0; filter: alpha(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; }

52-JS.JS文件


window.onload = function(){

    var playimages = document.getElementById('playimages');

    var big_ul = getClass(playimages,'big_pic')[0];

    var mark_left = getClass(big_ul,'mark_left')[0];
    var mark_right = getClass(big_ul,'mark_right')[0];
    var prev = getClass(big_ul,'prev')[0];
    var next = getClass(big_ul,'next')[0];

    var small_pic = getClass(playimages,'small_pic')[0];
    var small_ul = small_pic.getElementsByTagName('ul')[0];
    var small_lis = small_ul.getElementsByTagName('li');

    var big_lis = big_ul.getElementsByTagName('li');

    var zIndex = 2;
    var now = 0;
    var timer = null;

    //获得className 数组形式返回
    function getClass(ParentNode,className){

        var elements = ParentNode.getElementsByTagName('*');
        var arr = [];

        for(var i=0;i<elements.length;i++){
            if(elements[i].className == className){
                arr.push(elements[i]);
            }
        }

        return arr;
    }

    //小图opacity变化
    function xt_bianhua(){
        for(var j=0;j<small_lis.length;j++){
            if(j != now){
                startMove(small_lis[j],'opacity',60);
                // small_lis[j].style.opacity = 0.6;
            }else{
                startMove(small_lis[j],'opacity',100);
                // small_lis[j].style.opacity = 1;
            }
        }   
    }


    //小图图片的移动
    function xt_move(index){
        if(index == 0){
            small_ul.style.left = 0;
        }else if(index == small_lis.length-1){
            small_ul.style.width = parseInt(small_ul.style.width) + (index-1) * small_lis[0].offsetWidth + 'px';
        }else{
            small_ul.style.width = parseInt(small_ul.style.width) + (index-1) * small_lis[0].offsetWidth + 'px';
            small_ul.style.left = -(index-1)  * small_lis[0].offsetWidth + 'px';
        }   
    }


    //左右按钮显示或隐藏
    prev.onmouseover = mark_left.onmouseover = function(){
        startMove(prev,'opacity',100);
    };
    prev.onmouseout = mark_left.onmouseout = function(){
        startMove(prev,'opacity',0);
    };

    next.onmouseover = mark_right.onmouseover = function(){
        startMove(next,'opacity',100);
    };
    next.onmouseout = mark_right.onmouseout = function(){
        startMove(next,'opacity',0);
    };

    //点击小图切换大图
    for(var i=0;i<small_lis.length;i++){
        small_lis[i].index = i;
        small_lis[i].onclick = function(){
            //大图切换
            big_lis[this.index].style.zIndex = zIndex++;

            if(this.index != now){
                big_lis[this.index].style.height = 0;
                startMove(big_lis[this.index],'height',320);
            }

            now = this.index;

            //小图opacity变化
            xt_bianhua();

            //小图图片的移动
            xt_move(this.index);
        };
    }


    //点击左右按钮切换图片
    prev.onclick = function(){
        if(now != 0){
            now--;
            big_lis[now].style.zIndex = zIndex++;
            big_lis[now].style.height = 0;
            startMove(big_lis[now],'height',320);
            xt_move(now);
        }

        //小图opacity变化
        xt_bianhua();
    }

    next.onclick = function(){
        if(now != big_lis.length-1){
            now++;
            big_lis[now].style.zIndex = zIndex++;
            big_lis[now].style.height = 0;
            startMove(big_lis[now],'height',320);
            xt_move(now);
        }

        //小图opacity变化
        xt_bianhua();
    }

    function lunbotu(){
        now++;
        if(now == big_lis.length){
            now = 0;
        }
        //大图切换
        big_lis[now].style.zIndex = zIndex++;
        big_lis[now].style.height = 0;
        startMove(big_lis[now],'height',320);
        //小图opacity变化
        xt_bianhua();
        //小图ul移动
        xt_move(now);
    }

    //轮播图
    timer = setInterval(lunbotu,2000);

    playimages.onmouseover = function(){
        clearInterval(timer);
    };

    playimages.onmouseout = function(){
        timer = setInterval(lunbotu,2000);
    };

};

最近在学习javascript运动(其实是用定时器实现的功能)，以前学习js的时候都没有好好去了解内部的原理，现在当做是给自己重新认识它的一个机会吧。

总结：

一、JS匀速运动bug：

1.在设置timer定时器之前，需要clearInterval(timer)，否则再点击按钮执行定时器时，会在同一个div上同时执行多个定时器。

2.在setInterval内部有if...else..判断语句，判断是否到达终点，到达则停止执行，没有到达则继续执行定时器。

3.最重要的一点，比如你的速度speed=7,而你每30ms执行7px,但是你的目标target为300px,那么永远不会达到300px,只会到达294。此时解决方法则为Math.abs(target-此刻的值) < 7，则进行clearInterval(timer),还需要进行(比如)div.style.width = '300px';

4.老是出错的地方，浏览器不会提示的bug，要记得在后面加上’px’，比如div.style.width = div.offsetWidth + speed + ‘px’ ;
同时我们在获取行内样式的时候，比如获得width的值，有可能返回100px，如果没有注意，会将100px去与其它值相加，这样是不对的，我们需要parseInt(100px)转化为100;

二、缓冲运动bug：

1、2点与匀速运动的bug一致。

3.speed应该在setInterval内部定义。有一次不小心将spend在定时器外部定义，一直找不到哪里出错了，后来花了好长时间才注意到这个，虽然这个大部分人不会犯错，但还是会存在一些粗心的人，比如我。

4.缓冲速度，如果不使用Math.ceil(speed) 或 Math.floor(speed)，最终获得的speed会是0.XXX，或者是-0.XXX，这样会导致物体不会在运动。
比如：

var speed = (target-div.offsetLeft)/4;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

三、多个物体运动bug：

在看过第一、二点的bug，我想应该对匀速和缓冲运动有所了解了。前两个都是相对于单个物体运动来说。timer都是在全局作用域中定义的(即timer对于物体来说是共享的)。

因此要实现多个物体运动，需要每个物体定义每个timer。
比如：

<div></div>
<div></div>
window.onload = function(){
    var divs = document.getElementByTagName('div');
    for(var i=0;i<divs.length;i++){
        divs[i].timer = null;
        divs[i].onmouseover = function(){
            this.timer = setInterval(fn,30);
        };
        divs[i].onmouseout = function(){
            clearInterval(this.timer);
        };
    }
};
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值