<!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. Bootstrap -- 按钮样式与使用

    Bootstrap -- 按钮样式与使用 1. 可用于<a>, <button>, 或 <input> 元素的按钮样式 按钮样式使用: <!DOCTYPE h ...

  2. LeetCode算法题-Quad Tree Intersection（Java实现）

    这是悦乐书的第260次更新,第273篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第127题(顺位题号是558).四叉树是树数据,其中每个内部节点恰好有四个子节点:top ...

  3. Windows使用MongoDB，以及索引创建

    安装MongoDB https://www.mongodb.com/download-center#community 点击msi安装程序进行安装,可以进行自定义安装,选择安装位置,我选择的是D盘 在 ...

  4. Django框架【form组件】

    from django.shortcuts import render,redirect # Create your views here. from .models import * from dj ...

  5. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  6. Mango 基础知识

    1 mongdb和python交互的模块 pymongo 提供了mongdb和python交互的所有方法 安装方式: pip install pymongo 2 使用pymongo 1. 导入pymo ...

  7. 函数rand，randn，randi

    1,rand 生成均匀分布的伪随机数.分布在(0~1)之间主要语法:rand(m,n)生成m行n列的均匀分布的伪随机数rand(m,n,‘double’)生成指定精度的均匀分布的伪随机数,参数还可以是 ...

  8. Linux内核入门到放弃-虚拟文件系统-《深入Linux内核架构》笔记

    VFS的任务并不简单.一方面,它用来提供了一种操作文件.目录及其他对象的统一方法.另一方面,它必须能够与各种方法给出的具体文件系统的实现达成妥协,这些实现在具体细节.总体设计方面都有一些不同之处. 文 ...

  9. 外部访问docker中的MySQL

    注:192.168.1.203机器上装有docker,容器在该机器上 mysql> use mysql; mysql> update user set authentication_str ...

  10. PHP(SentCMS)网站 “新手”捉虫记

    我拖着疲惫的身躯,努力打开眼皮在写...... 昨晚弄到12点,我感觉应该弄好了. 故事开头是这样的:我呢朋友有个网站需要开发,我当时没时间就包给外面的公司了,由于外面公司维护费用比较贵. 那么网站维 ...