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

<%@ 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. 使用log4net日志组件经验分享

    常见步骤: 第一:在项目中引用log4net组件. 第二:配置log4net,一般都写在web.config中. 第三:调用部分.       具体怎么配置,大家可以参考博客其它博友写的,这里我只写我 ...

  2. ASP.NET Core 2.0 : 四. _Layout与_ViewStart

    本章我们新建一个项目,并通过这个项目熟悉一下_Layout与_ViewStart. 新建一个项目 首先, 文件->新建一个解决方案 选择.Net Core 的APP下面的ASP.NET Core ...

  3. java Mac自动化-java和ant环境搭建

    本文旨在帮助读者介绍,如果一个测试工程师拿到了mac本,该如何在本地搭建java和ant环境 其实在几年前,我们还大多使用的是windows本,而且我们也会比较善于使用windows笔记本,但自从ma ...

  4. win8 -telnet安装

    控制面板->程序-> 启动或关闭windows功能->选择telnet服务器和telnet客户端->确定 为了安全起见,我们可以设置为手动器用telnet,右键计算机-> ...

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

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

  6. Filezilla Server日志文件

    Filezilla Server版本:0.9.41. Filezilla Server日志文件在软件安装目录下Logs目录下. 但Filezilla Server默认不开始日志记录,如何开启filez ...

  7. selenium自动化测试学习（一）

    在学习selenium自动化测试前,我们需要先了解一点自动化测试的相关知识. (一)什么是自动化测试 (二)为什么要做自动化测试 (三)自动化测试优缺点 (1)什么是自动化测试 自动化测试是把以人为驱 ...

  8. iOS——系统提供的dispatch方法

    // 后台执行: dispatch_async(dispatch_get_global_queue(0,0), ^{ // something }); // 主线程执行: dispatch_async ...

  9. 《android开发进阶从小工到专家》读书笔记--HTTP网络请求

    No1: 客户端与服务器的交互流程: 1)客户端执行网络请求,从URL中解析出服务器的主机名 2)将服务器的主机名转换成服务器的IP地址 3)将端口号从URL中解析出来 4)建立一条从客户端与Web服 ...

  10. 《android开发艺术探索》读书笔记（十二）--Bitmap的加载和Cache

    接上篇<android开发艺术探索>读书笔记(十一)--Android的线程和线程池 No1: 目前比较常用的缓存策略是LruCache和DiskLruCache,LruCache常被用作 ...