首页 > 移动开发 > 详细

JQuery移动动画实现点击按钮切换图片--JQuery基础

时间：2017-11-25 21:36:13 阅读：259 评论：0 收藏：0 [点我收藏+]

标签：char url box var nim lang XML function html

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

<%@ 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基础

标签：char url box var nim lang XML function html

原文地址：http://www.cnblogs.com/qikeyishu/p/7896347.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！