<!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. Xml文档规则

    Xml文档规则: 名字中不能包含空格 名字不能以数字或标点符号开头 左尖括号 < 后不可以有空格 起始和结束标签的大小写必须一致(严格区分大小写) XML文件中出现的第一个元素是根元素 XML文 ...

  2. Istio入门实战与架构原理——使用Docker Compose搭建Service Mesh

    本文将介绍如何使用Docker Compose搭建Istio.Istio号称支持多种平台(不仅仅Kubernetes).然而,官网上非基于Kubernetes的教程仿佛不是亲儿子,写得非常随便,不仅缺 ...

  3. MySql 学习之路-高级2

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

  4. jest 自动化测试

    概述 jest 是 facebook 开源的,用来进行单元测试的框架,可以测试 javascipt 和 react. 单元测试各种好处已经被说烂了,这里就不多扯了.重点要说的是,使用 jest, 可以 ...

  5. Nginx Mac笔记

    安装 brew install nginx 可能出现问题: Error: /usr/local is not writable. You should change the ownership and ...

  6. 【Python 15】分形树绘制3.0（递归函数）

    1.案例描述 将递归函数与循环函数结合绘制2.0的图形 2.案例分析 3.上机实验 """ 作者:梁斌 功能:五角星的绘制 版本:3.0 日期:03/08/2017 新增 ...

  7. 慢日志查询python flask sqlalchemy慢日志记录

    engine = create_engine(ProdConfig.SQLALCHEMY_DATABASE_URI, echo=True) app = Flask(__name__) app.conf ...

  8. 正则表达式regex(golang版）

    代码: //File: main.go package main import ( "fmt" "regexp" ) func main() { r := re ...

  9. koa2源码解读及实现一个简单的koa2框架

    阅读目录 一:封装node http server. 创建koa类构造函数. 二:构造request.response.及 context 对象. 三:中间件机制的实现. 四:错误捕获和错误处理. k ...

  10. FineUI十周年纪念版即将发布（基于像素的响应式布局，独此一家）！

    [新版预报]FineUI十周年纪念版(v5.0.0)即将于2018-04-23发布! 官网示例已更新:http://pro.fineui.com/ 特别助攻:基于像素的响应式布局,FineUI独家秘笈 ...