jquery对象和dom原生获取的对象是不同的。

写了一个点击无缝滚动的demo,但是点击的时候如果上一个不运动完成,在快速点击就会快闪。

可是开始也清除定时器了,后来发现是传入的jq对象,jqobj.timer=定时器,这里jqobj没法添加.timer,所以每次清空也是徒劳,根本就没有添加上这个对象的属性

用document,getElementById(‘obj’)获取的原生dom对象,就是可以添加上.timer属性,所以清除定时器也是成功的。

重点是最后

//            ******************
//            document.getElementById('ul22')这里必须用原生dom对象,不能用jq对象
//            ******************
            rtjr.ui.move(document.getElementById('ul22'),-icont*liwidth,-(icont-1)*liwidth);
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin: 0;padding: 0;}
            li{list-style: none;}
            .box{width: 1200px;margin: 100px auto;}
            
            .gundong{width: 660px;border: 1px solid ;padding: 10px 80px 0px;position: relative;}
            .span3{position: absolute;top: 50%;left: 0;width: 80px;height: 40px;background: #ccc;line-height: 40px;text-align: center;margin-top: -20px;}
            .span4{position: absolute;top: 50%;right: 0;width: 80px;height: 40px;background: #ccc;line-height: 40px;text-align: center;margin-top: -20px;}
            .gunul_wrap{width: 660px;overflow-x: hidden;position: relative;height: 125px;}
            .gunul{width: 660px;margin: 0 auto;position: absolute;left: 0;top: 0;}
            .gunul:after{display: block;content: "";clear: both;}
            .gunul li{float: left;margin:0px 10px;}
            .gundong img{width: 200px;}
            .gundong a{text-decoration: none;color: #333;}
            .gundong p{width: 200px;line-height: 40px;text-align: center;}
        </style>
        <script type="text/javascript" src="js/jquery-1.10.2_d88366fd.js" ></script>
    </head>
    <body>
        <div class="box">
            
            <!--无缝滚动-->
            <div class="gundong">
                <span class="span3">next</span>
                <span class="span4">pre</span>
                <div class="gunul_wrap">
                    <ul class="gunul" id="ul22">
                        <li>
                            <a href=""><img src="images/gjlb2.jpg" alt="" /><p>1</p></a>
                        </li>
                        <li>
                            <a href=""><img src="images/gjlb3.jpg" alt="" /><p>2</p></a>
                        </li>
                        <li>
                            <a href=""><img src="images/gjlb5.jpg" alt="" /><p>3</p></a>
                        </li>
                    </ul>
                </div>
            </div>
            
            
        </div>
    </body>
</html>
<script>

    $(function(){
        rtjr.app.wufeng();
    });
    
    var rtjr={};
    
    rtjr.tools={};
    rtjr.ui={};
    rtjr.app={};
//    无缝滚动
    rtjr.tools.getul=function(obj){
        var cont=obj.html();
        cont+=cont;
        obj.html(cont);
        var objwidth=$(obj.find('li')[0]).outerWidth(true)*obj.find('li').length;
        obj.css({'width':objwidth})
    };
    rtjr.ui.move=function(obj,old,newd){
        console.log(obj.timer);
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            var ispeed=(newd-old)/10;
            ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
            if(newd==old){
                clearInterval(obj.timer);
            }else{
                old+=ispeed;
                $(obj).css({'left':old});
            }
        },30);
    };

    rtjr.app.wufeng=function(){
        var icont=0;
        rtjr.tools.getul($('.gunul'));
        var liwidth=$($('.gunul li')[0]).outerWidth(true);
        
        $('.span3').bind('click',function(){
            if(icont==($('.gunul li').length)/2){
                icont=0;
                $('.gunul').css('left',0);
            };
            rtjr.ui.move(document.getElementById('ul22'),-icont*liwidth,-(icont+1)*liwidth);
            icont++;
        });
        
        $('.span4').bind('click',function(){
            if(icont==0){
                icont=$('.gunul li').length/2;
                $('.gunul').css('left',-$('.gunul').outerWidth()/2);
            };
//            ******************
//            document.getElementById('ul22')这里必须用原生dom对象,不能用jq对象
//            ******************
            rtjr.ui.move(document.getElementById('ul22'),-icont*liwidth,-(icont-1)*liwidth);
            icont--;
        });
    };
</script>

 

posted @ 2017-08-14 14:26  盖大楼  阅读(535)  评论(0编辑  收藏  举报