標籤：char url box var nim lang XML function html
直接貼源碼了哈，這些都是自己總結的……汗水幾何？希望能幫到大家。<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<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;/*三張圖片每張寬度為640px*/
position:relative;/*移動層必須設定的屬性*/
}
#div_innerMove img {
float:left;/*圖片左浮動*/
}
#div_outer {
width:640px;/*為使其置中顯示寬度為640px的部分，所以設定了寬度*/
margin:10px auto;/*上下外邊距為10px，左右自適應*/
box-shadow:0 5px 5px red;/*設定邊框陰影*/
overflow:hidden;/*外層超出部分隱藏起來*/
}
#div_control {
width:100px;/*控制器層設寬度，設外邊距置中顯示*/
margin:0px auto;
}
#div_control #Btn_left, #div_control #Btn_right {
cursor:pointer;/*滑鼠手形顯示*/
}
</style>
</head>
<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="上一張" />
<input id="Btn_right" type="button" value="下一張" />
</div>
</div>
</form>
<script type="text/javascript">
var img_now = 0;//設定一個輔助的變數
var img_count = 3;//圖片的張數
$(document).ready(function () {
$("#Btn_left").click(function () {//滑鼠左鍵點擊事件
img_now = (img_now + img_count - 1) % img_count;//產生2、1、0三位元用於左鍵點擊下顯示顯示的圖片
moveTo(img_now);//函數執行語句
});
$("#Btn_right").click(function () {//滑鼠右鍵點擊事件
img_now = (img_now + 1) % img_count;//產生1、2、0三位元用於顯示右鍵點擊下顯示的圖片
moveTo(img_now);
});
});
function moveTo(i) {//自訂動畫移動函數
var _left = -(i * 640);//設定移動的位移
$("#div_innerMove").animate({ left: _left },200);//執行動畫，切換一次耗時大約200ms
}
</script>
</body>
</html>
JQuery移動動畫實現點擊按鈕切換圖片--JQuery基礎
