Scribd Logo
Upload

Welcome to Scribd!

  • New Text Document

    Uploaded by

    Nawaid Rahman
    9 views2 pages
    hh

    Original Title

    New Text Document (2)

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    hh

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views2 pages

    New Text Document

    Uploaded by

    Nawaid Rahman
    hh

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    <!

    doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Position - Image Cycler</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-
    ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
    body {
    margin: 0;
    }
    #container {
    overflow: hidden;
    position: relative;
    height: 400px;
    }

    img {
    position: absolute;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $( function() {
    function left( element, using ) {
    element.position({
    my: "right middle",
    at: "left+25 middle",
    of: "#container",
    collision: "none",
    using: using
    });
    }
    function right( element, using ) {
    element.position({
    my: "left middle",
    at: "right-25 middle",
    of: "#container",
    collision: "none",
    using: using
    });
    }
    function center( element, using ) {
    element.position({
    my: "center middle",
    at: "center middle",
    of: "#container",
    using: using
    });
    }

    left( $( "img:eq(0)" ) );
    center( $( "img:eq(1)" ) );
    right( $( "img:eq(2)" ) );

    function animate( to ) {
    $( this ).stop( true, false ).animate( to );
    }
    function next( event ) {
    event.preventDefault();
    center( $( "img:eq(2)" ), animate );
    left( $( "img:eq(1)" ), animate );
    right( $( "img:eq(0)" ).appendTo( "#container" ) );
    }
    function previous( event ) {
    event.preventDefault();
    center( $( "img:eq(0)" ), animate );
    right( $( "img:eq(1)" ), animate );
    left( $( "img:eq(2)" ).prependTo( "#container" ) );
    }
    $( "#previous" ).on( "click", previous );
    $( "#next" ).on( "click", next );

    $( "img" ).on( "click", function( event ) {


    $( "img" ).index( this ) === 0 ? previous( event ) : next( event );
    });

    $( window ).on( "resize", function() {


    left( $( "img:eq(0)" ), animate );
    center( $( "img:eq(1)" ), animate );
    right( $( "img:eq(2)" ), animate );
    });
    } );
    </script>
    </head>
    <body>

    <div id="container">
    <img src="images/earth.jpg" width="458" height="308" alt="earth">
    <img src="images/flight.jpg" width="512" height="307" alt="flight">
    <img src="images/rocket.jpg" width="300" height="353" alt="rocket">

    <a id="previous" href="#">Previous</a>


    <a id="next" href="#">Next</a>
    </div>

    </body>
    </html>

    You might also like