<!DOCTYPE html>

 <html>

 <head>

     <title>jquery动画滑动</title>

     <style type="text/css">

         .list{

             border: 1px solid #b4b4b4;

             width: 450px;

             position: relative;

             height: 150px;

             overflow: hidden;

         }

         .box{

             position: absolute;

             width: 100%;

             font-size: 0;

             white-space:nowrap;

         }

         .div{

             padding: 10px;

             width: 130px;

             height: 130px;

             display: inline-block;

         }

         .div img{

             width: 100%;

             height: 100%;

             object-fit: cover;

         }

         .next,.pre{

             cursor:pointer;

         }

     </style>

     <script type="text/javascript" src="http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.js"></script>

 </head>

 <body>

     <div class="list">

         <div class="box">

             <div class="div">

                 <img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />

             </div>

             <div class="div">

                 <img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />

             </div>

             <div class="div">

                 <img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />

             </div>

             <div class="div">

                 <img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />

             </div>

             <div class="div">

                 <img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />

             </div>

         </div>

     </div>

     <div>

         <span class="pre">上一个</span>

         <span class="next">下一个</span>

     </div>

     <script type="text/javascript">

         var ord = 0;

         function changeTo(ord){

             $(".list .box").stop(true,false).animate({ "left" : -ord*150},1000);

         }

         $(".pre").click(function (ev) {

             ord = ord > 0 ? --ord : $(".div").length -1;

             changeTo(ord);

         });

         $(".next").click(function (ev) {

             ord = ord < ($(".div").length-1)? ++ord : 0;

             changeTo(ord);

         });

     </script>

 </body>

 </html>

jq动画实现左右滑动的更多相关文章

  1. jQ小图标上下滑动特效

    嗯,又到了,夜静饥寒的时候,手指颤抖,回望去,屋内满是寂静,寥寥绰影,咳咳咳,想我程序员之路还没到终点...就...咳咳咳 好了日常神经结束,还要涂我的唇膏.还剩下,最后一章,js动画(四),明天放上 ...

  2. Android的Activity屏幕切换动画(一)-左右滑动切换

    (国内知名Android开发论坛eoe开发者社区推荐:http://www.eoeandroid.com/) Android的Activity屏幕切换动画(一)-左右滑动切换 在Android开发过程 ...

  3. （21）jq动画

    jq动画的优点 优点: 1.可以知道动画结束的表示(结束的回调函数) 2.可以利用jq动画插件完成复杂的动画 动画有三个参数:动画的样式是字典.动画持续的事件,动画结束回调函数 <!DOCTYP ...

  4. css动画和jq动画的简单区分

    有很多不怎么用css3写动画的同学经常会对其中css3的transform,transition,translate,animation,@keyframes等等动画属性混淆错乱,经常使用了发现没有效 ...

  5. jq动画设置图片抽奖(修改效果版)

    效果:点击开始,图片转动,按钮显示"停止",点击停止,选出中奖号码,,最后一个数字停止时,按钮变为"again",点击"again"开始转动 ...

  6. 自写Jq动画载入插件

    在写网站的时候,有一些dom第一次进入屏幕时需要加一个动画进入效果,如下图 于是,自己就研究下,要是实现gif图中左图效果大致原理就是首先将dom放在他的左侧,并将他的透明度(opacity)设置为0 ...

  7. jq——动画

    基本 1 show(可加时间)显示[在效果完成后可执行函数] 2 hide(可加时间)隐藏 3 toggle():切换效果 [在show和hide中切换] 有函数时 滑动动画 1 slideDown: ...

  8. jq动画插件，自制基于vue的圆形时钟

    首先附上jq插件库,里面的东西太炫了,建议学前端的可以看看学习下:http://www.jq22.com/ 里面有个“超个性动画版本的个人简历”,通过屏幕上不断打印内容,改变相应样式来实现动画简历,我 ...

  9. Android Animation动画实战（一）： 从布局动画引入ListView滑动时，每一Item项的显示动画

    前言: 之前,我已经写了两篇博文,给大家介绍了Android的基础动画是如何实现的,如果还不清楚的,可以点击查看:Android Animation动画详解(一): 补间动画 及 Android An ...

随机推荐

  1. Win10解除网速限制让网速飞起来

    Win10隐藏了20%的网速,下面叫你怎么释放它: 1.按Win+R调出运行,输入gpedit.msc点击确定; 2.点击windows设置,右击基于策略Qos,选择高级Qos设置: 3.勾选如图方框 ...

  2. MySql 学习之路-高级2

    目录: 1.约束 2.ALTER TABLE 3.VIEW 1.约束 说明:SQL约束用于规定表中的数据规则,如果存在违反约束的数据行为,行为会被约束终止,约束可以在建表是规定,也可以在建表后规定,通 ...

  3. Nginx 配置 https

    从云服务提供商处申请证书 申请 https 证书教程-百度经验 申请下来的证书目录结构 . ├── Apache │   ├── 1_root_bundle.crt │   ├── 2_website ...

  4. IDF-cookie欺骗

    原题链接:http://ctf.idf.cn/game/web/40/index.php 进入题目,发现一个长字符串,放到md5.base64均无意义. 观察地址栏,发现有两个参数,line和file ...

  5. 创建DVWA环境时遇到的问题

    前言:我下载了PHP Study,也按照步骤下载保存了DVWA,之后我又按照百度的准备登陆检查是否正确安装DVWA,于是,我登录了百度上查到的链接:http://localhost/DVWA-mast ...

  6. Clion 配置

    plugins: one dark theme font : fira code retina

  7. day 13 迭代器、可迭代对象、迭代器对象、生成器、生成器对象、枚举对象

    迭代器大概念 # 迭代器:循环反馈的容器(集合类型)# -- 不同于索引取值,但也可以循环的从容器对象中从前往后逐个返回内部的值​# 优点:不依赖索引,完成取值# 缺点:不能计算长度,不能指定位取值( ...

  8. robot中简单的使用键盘按键，和对象无关

    参考链接: https://blog.csdn.net/smallsmallmouse/article/details/78689675 1.在python中的代码 from selenium imp ...

  9. Eclipse中的快捷键

    Ctrl+1:快捷修复(数字 1 不是字母 l) 将鼠标悬停到出错区域,按 Ctrl+1,出现快捷修复的菜单, 按上下方向键选择一种修复方式即可. 也可以将光标移动到出错区域,按 F2 + Enter ...

  10. Java面试准备之IO

    Java IO Java IO 分类 Java BIO: 同步并阻塞,服务器实现模式为一个连接一个线程,即客户端有连接请求时服务器端就需要启动一个线程进行处理,如果这个连接不做任何事情会造成不必要的线 ...