JQuery移动动画实现点击按钮切换图片--JQuery基础
Posted Thanlon
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery移动动画实现点击按钮切换图片--JQuery基础相关的知识，希望对你有一定的参考价值。
直接贴源码了哈，这些都是自己总结的……汗水几何？希望能帮到大家。
<%@ 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基础的主要内容，如果未能解决你的问题，请参考以下文章
JQuery实现点击按钮切换图片(附源码)--JQuery基础
jquery如何实现点击按钮，按钮上面显示一个“+1”的提示