写了一个点击无缝滚动的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="data:images/gjlb2.jpg" alt="" /><p>1</p></a>

                        </li>

                        <li>

                            <a href=""><img src="data:images/gjlb3.jpg" alt="" /><p>2</p></a>

                        </li>

                        <li>

                            <a href=""><img src="data: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>

jquery对象和dom原生获取的对象是不同的。的更多相关文章

  1. 什么是jquery $ jQuery对象和DOM对象 和一些选择器

    1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的 ...

  2. jQuery对象与DOM对象

    jQuery对象与DOM对象是不一样的 可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换. 通过一个简单的例子,简单区分下jQuer ...

  3. jquery对象和DOM对象的区别和转换

    jquery对象和DOM对象的区别和转换 在使用jquery时,我们直接通过jq的选择器获取元素,然后对元素进行操作,用jq选择器获取到的对象是一个jq对象,jq对象能够使用jq提供的方法,但是不能用 ...

  4. jQuery对象和DOM对象的区别

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...

  5. jQuery对象与dom对象相互转换

    核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...

  6. JQuery对象与DOM对象的区别与转换

      1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj ...

  7. jQuery对象与DOM对象之间的转换方法

    刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...

  8. jQuery对象与dom对象的转换

    一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的 ...

  9. jquery对象和dom对象的相互转换

    更好的学习jquery,要区分好jquery对象和dom对象的区别. 先具体说说dom.举个例子 <html> <head></head> <body> ...

随机推荐

  1. 深入delphi编程理解之消息（二）发送消息函数及消息编号、消息结构体的理解

    一.delphi发送消息的函数主要有以下三个: (一).SendMessage函数,其原型如下: function SendMessage( hWnd: HWND; {目标句柄} Msg: UINT; ...

  2. itest(爱测试) 4.3.0 发布，开源BUG 跟踪管理 & 敏捷测试管理软件

    itest 简介:查看简介 test 开源敏捷测试管理,testOps 践行者.可按测试包分配测试用例执行,也可建测试迭代(含任务,测试包,BUG)来组织测试工作,也有测试环境管理,还有很常用的测试度 ...

  3. MyBatis学习总结（一）--mybatis快速入门

    一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以 ...

  4. Comparable

    为什么会有Comparable与Comparator接口? 引入策略模式   目录 引入 Comparable接口的来龙去脉 引入Comparator接口 什么是策略模式? 使用了策略模式有什么好处? ...

  5. 如何在JDBC Connection Configuration配置组件上添加控件

    如何在JDBC Connection Configuration配置组件上添加控件 最近项目刚上线,闲来无事又把Jmeter的源码拿出来研究研究,最初的目的是想扒一扒Jmeter里数据库处理的逻辑是怎 ...

  6. ZOJ - 3203 Light Bulb(三分)

    题意:灯离地面的高度为$H$,人的身高为$h$,灯离墙的距离为$D$,人站在不同位置,影子的长度不一样,求出影子的最长长度. 思路:设人离灯的距离为$x$,当人走到距离灯长度为$L$时,人在墙上的影子 ...

  7. netty（七）buffer源码学习2

    概述 文章主要介绍的是PoolArena,PoolChunk,PoolSubpage 三个类的源码 PoolArena PoolArena 是netty 的内存池实现类,通过预先申请一块大的空间,然后 ...

  8. 如何在CentOS 7上安装Apache

    使用systemctl管理Apache服务 我们可以像任何其他系统单元一样管理Apache服务. 要停止Apache服务,请运行: sudo systemctl stop httpd 要再次启动,请键 ...

  9. 【PAT甲级】1080 Graduate Admission (30 分)

    题意: 输入三个正整数N,M,K(N<=40000,M<=100,K<=5)分别表示学生人数,可供报考学校总数,学生可填志愿总数.接着输入一行M个正整数表示从0到M-1每所学校招生人 ...

  10. .click() 和 onclick方法

    onclick=""只能绑定一次,再次绑定会把之前的覆盖 $('').click()可以绑定多次,再次绑定会在前一个程序执行完后触发