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

<%@ 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. 使用TransactionScope（轻量级事务）实现数据库操作事务

    TransactionScope是.Net Framework 2.0滞后,新增了一个名称空间.它的用途是为数据库访问提供了一个"轻量级"[区别于:SqlTransaction]的 ...

  2. 解决无法make uImage的问题

    进入一个uboot目录, 执行make distclean make at91sam9260ek_config make ARCH=arm CROSS_COMPILE=arm-linux- cp to ...

  3. PHP7的新功能

    [转自:http://www.yiibai.com/php7/ ]   [PHP7标量类型声明] 在PHP7,一个新的功能,标量类型声明已被引入.标量类型声明有两种选择方式 - 强制方式- 强制性是默 ...

  4. Sublime 远程连接 Linux服务器

    Sublime是一款强大的编辑器,它的强大体现在它强大的插件. 要实现Sublime 远程连接 Linux服务器,需要使用插件SFTP. 一. 插件安装 用Package Control安装插件按下C ...

  5. golang使用http client发起get和post请求示例

    [转自 http://www.01happy.com/golang-http-client-get-and-post/ ] get请求 get请求可以直接http.Get方法,非常简单. 1 2 3 ...

  6. How to install tcpping on Linux.md

    To install tcptraceroute on Debian/Ubuntu: $ sudo apt-get install tcptraceroute To install tcptracer ...

  7. js使用defineProperty的一些坑

    var p2={ }; Object.defineProperty(p2,"gs",{ get:function () { return this.gs; }, set:funct ...

  8. RHEL6误安装RHEL7的包导致glibc被升级后系统崩溃处理方法

    RHEL6误使用了RHEL7的光盘源,安装了某个RPM包之后,导致glibc被升级,进而导致系统崩溃.   [root@rhel65 ~]# yum install ftp Loaded plugin ...

  9. Yii2框架RBAC(Role-Based Access Control)的使用

    1.在项目的common/config/main.php文件的components中添加如下代码:   'authManager' => [    'class' => 'yii\rbac ...

  10. [Essay] Apache Flink：十分可靠，一分不差

    Apache Flink:十分可靠,一分不差 Apache Flink 的提出背景 我们先从较高的抽象层次上总结当前数据处理方面主要遇到的数据集类型(types of datasets)以及在处理数据 ...