Home > Developer > Web Develop
Http://www.runoob.com/try/try.php?filename=jqueryui-example-position-cycler
<!doctype html>
<meta charset= "Utf-8" >
<title>jquery UI Positioning (Position)-Image looping </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:60RPX;
}
IMG {
Position:absolute;
}
</style>
<script>
$ (function () {
Refactoring parts To remove these plug-in methods
$.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>
<body>
<div id= "Container" >
<a id= "Previous" href= "#" > Previous </a>
<a id= "Next" href= "#" > Next </a>
</div>
</body>
JQuery UI implementation of the picture cycle display, often used in the homepage banner ad switch
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
