directly paste the source, ha, these are their own summary of ... Sweat geometry? Hope to help everyone. <%@ page language= "C #" autoeventwireup= "true" codefile= "Default.aspx.cs" inherits= "_default"%>
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; charset=utf-8" />
<title></title>
<script src= "Script/jquery-3.2.1.min.js" ></script>
<style type= "Text/css" >
* {
margin:0;
padding:0;
}
#div_innerMove {
width:1920px;/* Three photos each width is 640px*/
position:relative;/* properties that must be set by the move layer * /
}
#div_innerMove img {
float:left;/* Picture Left floating * /
}
#div_outer {
The width:640px;/* is set to a width of 640px so that it is centered .
margin:10px auto;/* up and down margin is 10px, left /Right adaptive */
box-shadow:0 5px 5px red;/* Set Border Shadow * /
overflow:hidden;/* The outer part of the outside is hidden.
}
#div_control {
width:100px;/* Controller Layer set width, set margin Center display * /
margin:0px Auto;
}
#div_control #Btn_left, #div_control #Btn_right {
cursor:pointer;/* Mouse hand-shaped display * /
}
</style>
<body>
<form id= "Form1" runat= "Server" >
<div id= "Div_outer" >
<div id= "Div_innermove" >
<asp:image id= "Image1" runat= "Server" imageurl= " ~/images/img1.jpg"/>
<asp:image id= "Image2" runat= "Server" imageurl= " ~/images/img2.jpg"/>
<asp:image id= "Image3" runat= "Server" imageurl= " ~/images/img3.jpg"/>
</div>
<div id= "Div_control" >
<input id= "btn_left" type= "button" value= "Previous"/>
<input id= "btn_right" type= "button" value= "Next"/>
</div>
</div>
</form>
<script type= "Text/javascript" >
var img_now = 0;//Set an auxiliary variable
var img_count = number of 3;//pictures
$ (document). Ready (function () {
$ ("#Btn_left"). Click (function () {//left mouse button click event
Img_now = (img_now + img_count-1)% img_count;//produces 2, 1, 3 digits for left-click to display the displayed picture
MoveTo (Img_now);//function Execution Statement
});
$ ("#Btn_right"). Click (function () {//right mouse click event
Img_now = (img_now + 1)% img_count;//produces 1, 2, 3 digits for displaying images that are displayed right-click
MoveTo (img_now);
});
});
function MoveTo (i) {//Custom animation move function
var _left =-(i * 640);//Set the displacement of the move
$ ("#div_innerMove"). Animate ({left: _left},200);//Perform animation, switch time takes about 200ms
}
</script>
</body>
jquery Mobile Animation Implementation Click Button Toggle Picture--jquery Basics
