<!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. HALCON学习笔记

    2019-2-2: 硬件选型--->镜头光源相机选型第一讲.avi: 高斯公式:1/u+1/v=1/f  u:物距  v:像距 f:焦距 线放大倍率:像高/物高  或者 像距/物距 镜头需要掌握 ...

  2. SQL Server 数据库状态选项-用户使用

    选项 1. single_user(单用户),multi_user(多用户),restricted_user(受限用户); 描述数据库的用户访问属性,它们互斥,设置其中任何一个选项就会取消对其它选项的 ...

  3. Vue学习之路2-项目初搭建

    1.检查环境是否全部安装成功 2.创建项目 2.1.打开dos命令窗口,使用dos命令转到项目文件夹下: 2.2.输入创建项目命令:vue init webpack myproject1 创建不同的打 ...

  4. LeetCode算法题-Maximum Product of Three Numbers（Java实现）

    这是悦乐书的第275次更新,第291篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第143题(顺位题号是628).给定一个整数数组,从其中找出三个数,使得乘积最大.例如: ...

  5. 二叉搜索树的最近公共祖先的golang实现

    给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先. 百度百科中最近公共祖先的定义为:“对于有根树 T 的两个结点 p.q,最近公共祖先表示为一个结点 x,满足 x 是 p.q 的祖先且 x ...

  6. linux下安装nodejs及npm

    转:https://www.cnblogs.com/wuyoucao/p/7011666.html 1.下载npm包 官网下载npm安装包,https://nodejs.org/en/,左边是稳定版右 ...

  7. 做自己的docker镜像(基于ubuntu:16.04)

    基于ubuntu:16.04 apt-get update -y apt-get install sudo -y 换源 sudo apt-get install vim sudo vim /etc/a ...

  8. 25 python 初学（socket，socketserver）

    参考blog :www.cnblogs.com/yuanchenqi/articles/5692716.html 1. sk = socket.socket() 里面有两个重要的参数,family 和 ...

  9. Linux内存管理 (7)VMA操作

    专题:Linux内存管理专题 关键词:VMA.vm_area_struct.查找/插入/合并VMA.红黑树. 用户进程可以拥有3GB大小的空间,远大于物理内存,那么这些用户进程的虚拟地址空间是如何管理 ...

  10. Kafka 详解（二）------集群搭建

    这里通过 VMware ,我们安装了三台虚拟机,用来搭建 kafka集群,虚拟机网络地址如下: hostname                      ipaddress             ...