<!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. T-SQL_select语句详解

    select语句执行的过程: 先看查询内容 ==>where条件 ==>[分组条件] ==>[分组搜索条件] ==>内容输出 ==>[是否排序] SQL中SELECT语句 ...

  2. 英语口语练习系列-C06-购物

    <水调歌头>·苏轼 明月几时有,把酒问青天. 不知天上宫阙,今夕是何年? 我欲乘风归去,又恐琼楼玉宇, 高处不胜寒. 起舞弄清影,何似在人间! 转朱阁,低绮户,照无眠. 不应有恨,何事长向 ...

  3. 【Teradata SQL】FALLBACK表改为NO FALLBACK表

    FALLBACK表在数据库中会留存双份数据,增加了数据可用性,但浪费了存储空间.变更表属性语句如下: alter table tab_fallback ,no fallback;

  4. 浏览器各个版本和系统（chrome/safari/edge/qq/360）

    浏览器对象: let userAgent = navigator.userAgent.toLowerCase()console.log(userAgent) Edge: mozilla/5.0 (wi ...

  5. P1273 有线电视网

    题目描述 某收费有线电视网计划转播一场重要的足球比赛.他们的转播网和用户终端构成一棵树状结构,这棵树的根结点位于足球比赛的现场,树叶为各个用户终端,其他中转站为该树的内部节点. 从转播站到转播站以及从 ...

  6. GRE与VXLAN

    一 GRE 1.1 概念 GRE全称是Generic Routing Encapsulation,是一种协议封装的格式,具体格式内容见:https://tools.ietf.org/html/rfc2 ...

  7. VisualStudio2017下ASP.NET CORE的TagHelper智能提示不能使用的解决办法

    之前在VS2017RC中就发现该问题,安装了依赖,但是前段一直点不出来asp-for,后来查了发行说明, 才知道在VS2017rc中暂时无法解决,所以一直等到VS2017正式版的发布,急冲冲的装好, ...

  8. 微信小程序代码快速转化为H5代码的方法！

    1.把小程序html里面的如下标签对应改成小程序的标签,即可快速转化成H5的页面! 利用ctrl+H将下面的对应标签全部替换! html: <view === <div </view ...

  9. 动态链接库-Win32 DLL的说明

    在实际编程时,我们可以把完成某种功能的函数放在一个动态链接库中,然后给其他程序调用. WinAPI中所有的函数都包含在3个最重要的DLL中. Kernel32.dll 它包含那些用于管理内存.进程和线 ...

  10. springboot打jar包正常无法访问页面

    网上看到太多说版本换成 1.4.2.RELEASE. 可以将程序打成war包发布, 1.启动类改为 @Overrideprotected SpringApplicationBuilder config ...