• jQuery UI 实现图片循环显示,常用于网站首页banner广告切换


    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>

  • 相关阅读:
    Jetson AGX Xavier初始化
    Jetson AGX Xavier更换apt-get源
    Mac远程访问Ubuntu
    Anaconda安装和环境的搭建
    C# NotifyIcon 托盘控件
    VS2010+OpenMP的简单使用
    VS2010+OpenCV3.4.1+zbar 64位
    datatbales 使用笔记
    ubuntu16.04 常用软件
    crontab不能正常执行的五种原因
  • 原文地址:https://www.cnblogs.com/eric-qin/p/5212363.html
Copyright © 2020-2023  润新知