直接贴源码了哈，这些都是自己总结的……汗水几何？希望能帮到大家。

<%@ 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基础的更多相关文章

  1. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  2. 原生js点击按钮切换图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. javascript总结36:DOM-点击按钮切换图片案例

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  4. JAVA Eclipse如何设置点击按钮切换图片

    右击图片文件夹,新建一个Android XML文件   设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Element为sele ...

  5. js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言

    js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言 一.总结 一句话总结:实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的. 1.如 ...

  6. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  7. Android_UI_点击按钮切换背景效果实现

    实现按钮按下和释放,按钮背景图片相应切换效果的方法这里介绍两种,一种是在代码里实现,另一种是在xml文件里实现 一.在xml文件里 首先现在layout的一个xml文件下定义Button如下所示: [ ...

  8. 【demo练习三】：图片水平滚动、点击按钮变更图片动画

    要求:四张图片水平滚动,每隔5秒进行一次循环,点击按钮随机变更图片. XAML前台代码: <Window x:Class="图片滚动.MainWindow" xmlns=&q ...

  9. Axure初体验:简单交互、通过按钮切换图片

    前言: 之前是一直用processon的UI原型设计,后来感觉只能完成静态页面的processon满足不了原型设计的需求,断网时候也不方便修改.展示.最终还是决定学习动态页面的制作,所选工具为原型设计 ...

随机推荐

  1. ES6的Symbol

    let s = Symbol(); alert(typeof(s)); // Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比 ...

  2. 事务与隔离级别------《Designing Data-Intensive Applications》读书笔记10

    和数据库打交道的程序员绕不开的话题就是:事务,作为一个简化访问数据库的应用程序的编程模型.通过使用事务,应用程序可以忽略某些潜在的错误场景和并发问题,由数据库负责处理它们.而并非每个应用程序都需要事务 ...

  3. 浅谈JavaScript的事件（事件模拟）

    事件经常由操作或者通过浏览器功能触发,通过JavaScript也可以触发元素的事件.通过JavaScript触发事件,也称为事件的模拟. DOM中事件模拟 可以document的createEvent ...

  4. 备忘录之 —— .bashrc(IC工具篇)

    好久没有使用这些IC工具了,装在自己的虚拟机中的Linux系统里面,现在想要卸载掉,想起之前自己辛辛苦苦的折腾这些工具配置,如果直接删除,感觉未免有点对不起自己的劳动成果,或许以后再也用不到了,就当是 ...

  5. Go学习笔记02-源码

    第二部分 源码 基于 Go 1.4,相关文件位于 src/runtime 目录.文章忽略了 32bit 代码,有兴趣的可自行查看源码文件.为便于阅读,示例代码做过裁剪. 1. Memory Alloc ...

  6. MySQL复制同一个服务器的表结构和表数据

    例如,现在服务器上有数据库 dbx 和 dby,dbx中有很多表,要把dbx中的表全部复制到dby,如下操作: 首先: use dby; [复制表结构] CREATE TABLE user LIKE ...

  7. LNMP搭建01 -- 编译安装MySQL 5.6.14 和 LNMP相关的区别

    [编译安装MySQL 5.6.14] [http://www.cnblogs.com/xiongpq/p/3384681.html ]  [mysql-5.6.14.tar.gz 下载] http:/ ...

  8. Jetty容器

    ♣Jetty和Tomcat的区别 ♣Jetty下载.安装 ♣eclipse安装jetty插件 ♣第一个jetty测试(maven+jetty) 1.Jetty和Tomcat的区别   Jetty 是一 ...

  9. Socket网络通信之数据传递

    Socket通信的步骤: 1.创建ServerSocket和Socket 2.打开连接到Socket的输入/输出流 3.按照协议对Socket进行读/写操作 4.关闭输入输出流.关闭Socket 服务 ...

  10. CEF小白人系列1-认识CEF

    手头上有个项目需要做浏览器的相关功能,评估了几个嵌入式方案最后选定CEF作为开发基础. 在入坑新技术的时候第一选择是去官网学习,这是一个非常好的习惯. CEF官网(请科学上网) https://bit ...