<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>jquery左右滑动效果的实现</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#bta").click(function () {

                $("#unit").css("left", "300px");

                document.getElementById("unit").style.left = "300px";

                //                var container = document.getElementById("unit");

                //                try {

                //                    container.insertBefore(container.lastChild, container.firstChild)

                //                }

                //                catch (e) { alert(e); }

                $("#unit").prepend($("#unit>div:last"));

                $("#unit").animate({ "left": 0 }, 500);

                //$("#unit").stop(true, false).animate({ "left": 0 }, 500); 

            });

            $("#btb").click(function () {

                $("#unit").animate({ "left": -300 }, 500);

                //$("#unit").stop(true, false).animate({ "left": -300 }, 500);

                function gundong() {

                    $("#unit").css("left", "0px");

                    //document.getElementById("unit").style.left = "0px";

                    $("#unit").append($("#unit>div:first"));

                    //                                        var container = document.getElementById("unit");

                    //                                        try {

                    //                                            container.appendChild(container.firstChild);

                    //                                        }

                    //                                        catch (e) { alert(e); }

                }//等待动画滚动后执行

                setTimeout(function () { gundong() }, 700);

            })

        });

    </script>

    <style type="text/css">

        *

        {

            padding: 0;

            margin: 0;

        }

        #box

        {

            width: 300px;

            height: 150px;

            margin-bottom: 50px;

            position: relative;

            overflow: hidden;

        }

        #unit

        {

            width: 1200px;

            position: absolute;

        }

        #unit div

        {

            float: left;

            width: 300px;

            height: 150px;

        }

        #bga

        {

            background-color: #F30;

        }

        #bgb

        {

            background-color: #F90;

        }

        #bta, #btb

        {

            float: left;

            width: 50px;

            padding-right: 50px;

            color: #FFF;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div style="width: 800px; height: 300px; padding-top: 100px; background-color: #999;

        margin: 0 auto;">

        <div id="box">

            <div id="unit">

                <div id="bga">

                    框一</div>

                <div id="bgb">

                    框二</div>

                <div id="bgc">

                    框三</div>

                <div id="bgd">

                    框四</div>

            </div>

        </div>

        <div id="bta">

            左</div>

        <div id="btb">

            右</div>

    </div>

</body>

</html>

jquery左右滑动效果的实现的更多相关文章

  1. js进阶 13-2 jquery动画滑动效果哪些注意事项

    js进阶 13-2 jquery动画滑动效果哪些注意事项 一.总结 一句话总结:滑动里面这里up是隐藏,down是显示. 1.jquery动画默认的两个切换效果是什么(swing默认和linear的区 ...

  2. jquery 上下滑动效果

    <script type="text/javascript"> var myar = setInterval('AutoScroll(".li_gundong ...

  3. Jquery Mobile左右滑动效果

    首先在一个页面里面定义两个< div data-role="page">,这里为了突出重点,就没有写出footer和header.定义的页面如下: <body&g ...

  4. jquery 实现导航栏滑动效果

    精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...

  5. jquery的slideUp、slideDown、slideToggle等涉及滑动效果的一系列函数，在IE浏览器下有几处bug

    jquery的slideUp.slideDown.slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug: 1. 因position引起的问题 影响:IE全系列 症状:在需要sl ...

  6. jquery 如何实现回顶部 带滑动效果

    $("#returnTop").click(function () { var speed=200;//滑动的速度 $('body,html').animate({ scrollT ...

  7. bootstrap实现 手机端滑动效果，滑动到下一页，jgestures.js插件

    bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...

  8. 全新jquery多点滑动幻灯片——全屏动画animateSlide

    首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...

  9. 滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动

    今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动 ...

随机推荐

  1. Python基本数据类型之dict

    一.创建字典: d = { "name": "morra", #字典是无序的 "age": 99, "gender": ...

  2. 区别 Jquery对象和Dom对象

    在讨论之前,先约定好定义变量的风格. 如果获取的对象是jQuery对象,那么在变量前加上$,例如: var $variable = jQuery对象; 如果获取的是DOM对象,则定义如下: var v ...

  3. rabbitmq因为主机名更改导致连接不上

    今天创建rabbitmq用户的时候报错,说nodedown,定睛一看,发现主机名是localhost,而此时我们的主机名是controller01,所以猜测是主机名导致的,重启服务器,就成功添加了. ...

  4. 在linux下如何将文件夹打包

    tar tar命令可以用来压缩打包单文件.多个文件.单个目录.多个目录. 常用格式: 单个文件压缩打包 tar czvf my.tar file1 多个文件压缩打包 tar czvf my.tar f ...

  5. python的正则表达式 re-------可以在字符串前加上 r 这个前缀来避免部分疑惑，因为 r 开头的python字符串是 raw 字符串，所以里面的所有字符都不会被转义

    正则表达式使用反斜杆(\)来转义特殊字符,使其可以匹配字符本身,而不是指定其他特殊的含义.这可能会和python字面意义上的字符串转义相冲突,这也许有些令人费解.比如,要匹配一个反斜杆本身,你也许要用 ...

  6. DNS（企业级）

    构建DNS(企业级) 1.硬件选型 CPU:12C以上配置 内存:16G 网络:千兆 2.初始化系统配置 关闭 iptables service iptables stop chkconfig ipt ...

  7. FIFA halts 2026 bids amid scandal 国际足联在丑闻期间停止2026年足球世界杯申请

    FIFA halts 2026 bids amid scandal 国际足联在丑闻期间停止2026年足球世界杯申请 But official insists 2018 Cup will stay in ...

  8. js日期加减

    先补充下基础知识: var myDate = new Date(); //myDate默认返回当前时间 myDate.getYear(); //获取当前年份(2位) myDate.getFullYea ...

  9. 如何在命令行模式下查看Python帮助文档---dir、help、__doc__

    如何在命令行模式下查看Python帮助文档---dir.help.__doc__ 1.dir函数式可以查看对象的属性,使用方法很简单,举str类型为例,在Python命令窗口输入 dir(str) 即 ...

  10. msbuild FileSysExcludeFiles

    <?xml version="1.0" encoding="utf-8"?> <!-- This file is used by the pu ...