菜鸟学堂
在线运行
源代码
<!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>
运行结果
在线运行
菜鸟学堂 edu.jb51.net