1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>jquery左右滑动效果的实现</title>
  6.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  7.     <script type="text/javascript">
  8.         $(document).ready(function () {
  9.             $("#bta").click(function () {
  10.                 $("#unit").css("left", "300px");
  11.                 document.getElementById("unit").style.left = "300px";
  12.                 //                var container = document.getElementById("unit");
  13.                 //                try {
  14.                 //                    container.insertBefore(container.lastChild, container.firstChild)
  15.                 //                }
  16.                 //                catch (e) { alert(e); }
  17.                 $("#unit").prepend($("#unit>div:last"));
  18.                 $("#unit").animate({ "left": 0 }, 500);
  19.                 //$("#unit").stop(true, false).animate({ "left": 0 }, 500); 
  20.  
  21.             });
  22.             $("#btb").click(function () {
  23.                 $("#unit").animate({ "left": -300 }, 500);
  24.                 //$("#unit").stop(true, false).animate({ "left": -300 }, 500);
  25.  
  26.                 function gundong() {
  27.                     $("#unit").css("left", "0px");
  28.                     //document.getElementById("unit").style.left = "0px";
  29.                     $("#unit").append($("#unit>div:first"));
  30.                     //                                        var container = document.getElementById("unit");
  31.                     //                                        try {
  32.                     //                                            container.appendChild(container.firstChild);
  33.                     //                                        }
  34.                     //                                        catch (e) { alert(e); }
  35.                 }//等待动画滚动后执行
  36.                 setTimeout(function () { gundong() }, 700);
  37.             })
  38.         });
  39.  
  40.     </script>
  41.     <style type="text/css">
  42.         *
  43.         {
  44.             padding: 0;
  45.             margin: 0;
  46.         }
  47.         #box
  48.         {
  49.             width: 300px;
  50.             height: 150px;
  51.             margin-bottom: 50px;
  52.             position: relative;
  53.             overflow: hidden;
  54.         }
  55.         #unit
  56.         {
  57.             width: 1200px;
  58.             position: absolute;
  59.         }
  60.         #unit div
  61.         {
  62.             float: left;
  63.             width: 300px;
  64.             height: 150px;
  65.         }
  66.         #bga
  67.         {
  68.             background-color: #F30;
  69.         }
  70.         #bgb
  71.         {
  72.             background-color: #F90;
  73.         }
  74.         #bta, #btb
  75.         {
  76.             float: left;
  77.             width: 50px;
  78.             padding-right: 50px;
  79.             color: #FFF;
  80.             cursor: pointer;
  81.         }
  82.     </style>
  83. </head>
  84. <body>
  85.     <div style="width: 800px; height: 300px; padding-top: 100px; background-color: #999;
  86.         margin: 0 auto;">
  87.         <div id="box">
  88.             <div id="unit">
  89.                 <div id="bga">
  90.                     框一</div>
  91.                 <div id="bgb">
  92.                     框二</div>
  93.                 <div id="bgc">
  94.                     框三</div>
  95.                 <div id="bgd">
  96.                     框四</div>
  97.             </div>
  98.         </div>
  99.         <div id="bta">
  100.             左</div>
  101.         <div id="btb">
  102.             右</div>
  103.     </div>
  104. </body>
  105. </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. CSS--字体

    通用字体系列 CSS中定义了5种通用字体系列 举例说明:指定通用字体系列 body { font-family:sans-serif;/*如果你希望文档使用一种sans-serif字体而并不关心是哪一 ...

  2. 从.o文件中提取指定开头依赖于外部接口的脚本

    nm -g audio_la-audio.o | grep " U " | awk '{ print $2}' | grep "^gst_"

  3. 签名有元程序集 Signed Friend Assemblies

    下面的例子演示了创建签名程序集和有元程序集.这就要求两个程序集都是强命名,在下面的例子中,两个程序集都用了同一个秘钥,也可以用不同的秘钥. 1. 生成秘钥, 这个在前面的博客中有说明,生成秘钥文件sn ...

  4. nginx 学习笔记(9) 配置HTTPS服务器--转载

    HTTPS服务器优化SSL证书链合并HTTP/HTTPS主机基于名字的HTTPS主机带有多个主机名的SSL证书主机名指示兼容性 配置HTTPS主机,必须在server配置块中打开SSL协议,还需要指定 ...

  5. CentOS7安装Nginx并部署

    服务器IP是192.168.36.136 1.直接yum install nginx即可 2.主配置文件是/etc/nginx/下的nginx.conf,另外一个是/etc/nginx/conf.d/ ...

  6. 初识Hadoop一，配置及启动服务

    一.Hadoop简介: Hadoop是由Apache基金会所开发的分布式系统基础架构,实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS:Hadoo ...

  7. JavaWeb学习笔记——javabean

  8. 快速lable内边距

  9. Django笔记-helloworld

    网上的Django资料太乱了,我想写一下自己的学习过程(只记大体过程,有时间就完善).(用eclipse+PyDev工具开发的) 1.项目结构 2.关键代码:(注意缩进,可能贴上来缩进格式等有变化,我 ...

  10. ASP.NET WebAPI 08 Message,HttpConfiguration,DependencyResolver

    ASP.NET WebAPI 08 Message,HttpConfiguration,DependencyResolver   Message WebAPI作为通信架构必定包含包含请求与响应两个方法 ...