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>
转载于:https://www.cnblogs.com/qikeyishu/p/7896347.html
JQuery移动动画实现点击按钮切换图片--JQuery基础相关推荐
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html> <h ...
- Android 点击按钮切换图片
Android 点击按钮切换图片 效果如图: 点击后: 主要代码: //切换图片 but1.setBackgroundResource(R.drawable.qq1); 全部代码: public cl ...
- js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录 前言 一.DOM是什么? 二.对象的HTML DOM 树 三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
- vue中点击按钮切换图片
vue中点击按钮切换图片 直接附上代码,亲测有效 <!-- --> <template><div><div class="">< ...
- vue点击按钮怎么跳转图片_Vue中点击按钮切换图片;
页面效果比较差,但是有图总比没图强点 这是最开始的页面,我们看到,图中只有一个"右箭头",点击右箭头; 左箭头也有了,然后我们继续点击右箭头; 右箭头没有了,只剩下了左箭头, 以上 ...
- 用易语言制作一款图文展示软件,点击按钮切换图片和文字说明,易语言按钮、图片框、编辑框的应用
在如今这个商业社会,产品宣传至关重要,尤其是向目标客户发送产品相册,非常有利于促进更多商品的交易.用易语言制作一款图文同时展示的小软件,通过网络发送给客户,客户很方便了解产品详情,从而提升客户体验.此 ...
- html点击按钮切换图片代码_SVG创意推文—『点击开窗』教程
嘿,胖友们大家好呀,我是三儿. 好久不见,胖友们有没有想我呀!最近这段时间,各大官媒齐齐出手,朝着SVG创意推文进军.之前人民日报推了一篇<点亮武汉>在当时引起了不小的轰动,三儿也连忙出了 ...
- JS实现点击按钮切换图片
使用JavaScript实现点击'上一张','下一张'循环播放图片,并在头部标识出'共6张图片,当前第 * 张',练习代码展示: 接下来先是效果图: 接下来是代码 <!DOCTYPE html& ...
- js中点击按钮切换图片
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title ...
- Roson的Qt之旅#106 QML在图片上方放置按钮并实现点击按钮切换图片
QML完整代码如下: import QtQuick 2.9 import QtQuick.Window 2.2 import QtQml.Models 2.2 import QtQuick.Contr ...
最新文章
- Linux 配置多个Tomcat
- VS2005 宽字符 unicode字符集和多字节字符集
- Telephone Number
- 把数组排列成最小的数(详解)
- qt读取txt文件内容
- Bit Digital反驳美国做空机构J Capital对其比特币业务的虚假指控
- 详解HTML5网页结构
- Word2016怎么和mathtype兼容
- java采购系统_java采购申请系统
- java基础核心总结归纳---参考手册
- Mac不用Boot Camp 安装双系统
- JDK 7(Java SE Development Kit)全平台全版本安装包免费下载
- CorelDRAW 文字排版用了这些方法肯定有意想不到的效果呈现
- 安装Pytorch-gpu版本(第一次安装 或 已经安装Pytorch-cpu版本后)
- Latex之大小写罗马数字
- 2022杭电多校 第三场 B题 Boss Rush
- Oracle 大表数据删除/清理方法小结
- javaFx实现直尺效果——可旋转、拖动、拉长
- 如何更有效的进行面试
- Golang-Beego(go mod)