http://www.runoob.com/try/try.php?filename=jqueryui-example-position-cycler

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 定位（Position） - 图像循环</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">
  <style>
  body {
    margin: 0;
  }
  #container {
    overflow: hidden;
    position: relative;
    height: 400px;
  }
 
  img {
    position: absolute;
  }
  </style>
  <script>
  $(function() {
    // 重构部件，去除这些插件方法
    $.fn.left = function( using ) {
      return this.position({
        my: "right middle",
        at: "left+25 middle",
        of: "#container",
        collision: "none",
        using: using
      });
    };
    $.fn.right = function( using ) {
      return this.position({
        my: "left middle",
        at: "right-25 middle",
        of: "#container",
        collision: "none",
        using: using
      });
    };
    $.fn.center = function( using ) {
      return this.position({
        my: "center middle",
        at: "center middle",
        of: "#container",
        using: using
      });
    };
 
    $( "img:eq(0)" ).left();
    $( "img:eq(1)" ).center();
    $( "img:eq(2)" ).right();
 
    function animate( to ) {
      $( this ).stop( true, false ).animate( to );
    }
    function next( event ) {
      event.preventDefault();
      $( "img:eq(2)" ).center( animate );
      $( "img:eq(1)" ).left( animate );
      $( "img:eq(0)" ).right().appendTo( "#container" );
    }
    function previous( event ) {
      event.preventDefault();
      $( "img:eq(0)" ).center( animate );
      $( "img:eq(1)" ).right( animate );
      $( "img:eq(2)" ).left().prependTo( "#container" );
    }
    $( "#previous" ).click( previous );
    $( "#next" ).click( next );
 
    $( "img" ).click(function( event ) {
      $( "img" ).index( this ) === 0 ? previous( event ) : next( event );
    });
 
    $( window ).resize(function() {
      $( "img:eq(0)" ).left( animate );
      $( "img:eq(1)" ).center( animate );
      $( "img:eq(2)" ).right( animate );
    });
  });
  </script>
</head>
<body>
 
<div id="container">
  <img src="/wp-content/uploads/2014/03/earth.jpg" width="458" height="308" alt="earth">
  <img src="/wp-content/uploads/2014/03/flight.jpg" width="512" height="307" alt="flight">
  <img src="/wp-content/uploads/2014/03/rocket.jpg" width="300" height="353" alt="rocket">
 
  <a id="previous" href="#">上一个</a>
  <a id="next" href="#">下一个</a>
</div>
 
 
</body>
</html>

jQuery UI 实现图片循环显示，常用于网站首页banner广告切换的更多相关文章

  1. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

  2. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  3. jQuery点击图片放大显示原图效果

    HTML部分:<div id="append_parent"></div> JS代码部分: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  4. Web 在线文件管理器学习笔记与总结（6）jQuery UI 预览图片

    ① 查看文件内容,如果文件是图片类型,点击直接查看图片: ② 如果不是图片类型,显示文件中的内容: ③ 使用 jQuery UI 中的 Dialog 显示图片 a.引入: <script src ...

  5. 基于jQuery UI的tabs选项卡美化

    很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...

  6. jquery ui bootstrap日期插件

    http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepic ...

  7. Touch Punch在移动设备上面增加jQuery UI的触摸支持|Jquery UI 支持移动端 触摸滑动等

    jQuery UI是我们前台开发常用的UI前端类库,但是目前的jQuery UI用户界面类库在互动和widget上并不支持touch事件.这意味着你在桌面上设计的优雅的UI可能在触摸设备,例如,ipa ...

  8. jQuery UI -- Repeater & 手风琴(Accordion)效果

    jQuery UI -- Repeater & 手风琴(Accordion)效果 很简单的范例,完全不用写程序 直接套用就能做! 但是,基础不稳的人,连「复制贴上」直接套用, 对您而言,都困难 ...

  9. jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）

    1.表单验证插件——validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:   $(form).validate({o ...

随机推荐

  1. Python-12-MySQL & sqlalchemy ORM

    MySQL MySQL相关文章这里不在赘述,想了解的点击下面的链接: >> MySQL安装 >> 数据库介绍 && MySQL基本使用 >> MyS ...

  2. Gradle 10分钟上手指南

    java的源码构建工具,大致经历了 ant -> maven -> gradle 这个过程,每一次进步,都是在解决之前的工具所带来的问题,简单来说: 1. ant 功能虽然也很强大,但是过 ...

  3. Nginx负载均衡实践之一：基本实现

    由于现在的网站架构越来越大,基于互联网的用户也是日渐增长,所以传统的单机版服务器已经渐渐不能适应时代发展的需要.最近在和其他企业接触的过程中,发现对于互联网的经验尤为看重,所谓的互联网经验,其实就是指 ...

  4. MySQL数据库备份--mysqldump用法

    导出要用到MySQL的mysqldump工具,基本用法是:   shell> mysqldump [OPTIONS] database [tables] 如果你不给定任何表,整个数据库将被导出. ...

  5. Mongodb学习笔记四(Mongodb聚合函数)

    第四章 Mongodb聚合函数 插入 测试数据 ;j<;j++){ for(var i=1;i<3;i++){ var person={ Name:"jack"+i, ...

  6. JS组件系列——不容错过的两款Bootstrap Icon图标选择组件

    前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的 ...

  7. [ASP.NET 5]终于解决：Unable to load DLL 'api-ms-win-core-localization-obsolete-l1-2-0.dll'

    11月12日,惊喜地发现SqlClient(System.Data.SqlClient.dll)跨平台了(对应的nuget包包是runtime.unix.System.Data.SqlClient), ...

  8. 创建django项目

    python /usr/local/lib/python3.4/dist-packages/Django-1.9.10-py3.4.egg/django/bin/django-admin.py sta ...

  9. Linux shell编程

    1. 批量添加用户的小脚本: for name in xp wrg lct do useradd $name echo red | passwd --stdin $name done 对echo re ...

  10. 篇一：JSON格式转换(一)

    JSON.parse()和JSON.stringify()的使用 1.JSON.parse() 用于从一个字符串中解析出json 对象.例如 var str='{"name":&q ...