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

<%@ 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. Vue脚手架（vue-cli）安装总结

    单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 提供一 ...

  2. 通过WMI获取机器信息

    PerformanceCounter的介绍就不多说了,MSDN上介绍的很详细: https://msdn.microsoft.com/zh-cn/library/system.diagnostics. ...

  3. 超级简便的容器化部署工具（使用 ASP.NET Core 演示）

    Docker 改变了我们部署网站的方式,从原先的手动编译打包上传,到现在的构建镜像然后推送部署,让我们在配置环境上所花费的时间大大减少了.不仅如此,通过一系列相关的工具配合,可以很轻松的实现 CI.C ...

  4. Sourcetree的安装与使用

    1 安装遇到的问题 https://segmentfault.com/q/1010000007643870 解决该问题的方法: http://www.jianshu.com/p/3478e2a214a ...

  5. MySQL的字符编码设置

    -- 创建数据库时,设置数据库的编码方式 -- CHARACTER SET:指定数据库采用的字符集,utf8不能写成utf-8-- COLLATE:指定数据库字符集的排序规则,utf8的默认排序规则为 ...

  6. css实现隐藏多余溢出文字并显示省略号

    <meta charset="utf-8" /> <style> .txt{ width:200px; border:1px solid #ddd; ove ...

  7. [Ccodeforces 736C] Ostap and Tree - 树形DP

    给定一个n个点的树,把其中一些点涂成黑色,使得对于每个点,其最近的黑点的距离不超过K. 树形DP. 设置状态f[i][j]: 当j <= K时: 合法状态,表示i的子树中到根的最近黑点距离为j的 ...

  8. Windows Server 2016-存储新增功能

    本章给大家介绍有关Windows Server 2016 中存储方面的新增功能,具体内容如下: 1.Storage Spaces Direct: 存储空间直通允许通过使用具有本地存储的服务器构建高可用 ...

  9. Dynamics CRM 2015-Ribbon In Basic Home Tab

    前文中有说到关于Form上Ribbon的配置以及控制,而Ribbon Button还可以在其它地方的配置,今天就来说说在Basic Home Tab里面的配置,效果图如下: 具体配置Customiza ...

  10. 10分钟入门kubernetes(上)

    kubernetes简称k8s, 主要用途是automate deployment, scaling, and managment of containerized applications.是目前非 ...