左右图片切换

原创 2013年12月05日 15:22:59
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="腾讯图片.WebForm1" %>

<!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>

    <style type="text/css">
        #divleft {
            float:left;
            border:1px solid green;
            width:200px;
            height:200px;
            margin-top:50px;
        }
        #divcenter {
        float:left;
        border:1px solid red;
        width:300px;
        height:300px;
        }
        #divright {
            float:left;
            border:1px solid green;
            width:200px;
            height:200px;
            margin-top:50px;
        }
    </style>

    <script type="text/javascript" src="script/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="script/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        var imgArray = new Array('image/duanxue.jpg', 'image/shari.jpg', 'image/风沙翎.jpg', 'image/星期六.jpg', 'image/卓诗尼.jpg');
        var imgCount = 0;
        $(function () {
            $('#Button1').click(function () {
                    if (imgCount < imgArray.length - 1) {
                        imgCount++;
                    }
                    else {
                        imgCount = 0;
                    }
                    $('#img1').attr('src', imgArray[imgCount]);
                    $('#img1').css('width', '300px');
                    $('#img1').css('height','300px');
            })
        })

        $(function () {
            //imgCount = 1;
            $('#Button2').click(function () {
                if (imgCount > 0) {
                    imgCount--;
                }
                else {
                    imgCount = imgArray.length ;
                }
                $('#img1').attr('src', imgArray[imgCount]);
                $('#img1').css('width', '300px');
                $('#img1').css('height', '300px');
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divleft">
        <input id="Button2" type="button" value="向左" />
    </div>
        <div id="divcenter">
            <img src="image/duanxue.jpg" id="img1" width="300" height="300"  />
        </div>
        <div id="divright">
            <input id="Button1" type="button" value="向右" />
        </div>
    </form>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

GridView+pagerViewer 图片浏览,点击全屏,滑动左右切换+删除关闭+拍照

包结构 BrowsePicActivity.java

一行代码搞定:下拉放大图片, 导航栏颜色渐变, 添加子控制器, 左右滑动同时切换按钮

目的本文要跟大家分享的是一个带有多种效果的控制器,仅需一行代码即可创建。 这个控制器通过下拉可以放大顶部图片,上推可以使导航栏的颜色渐变,并且添加了三个子控制器,页面中间的三个按钮用来切换,当然,你...

图片展示(手动左右切换)

1、html部分: 2、css部分: 3、js部分: 注:要引入maquery.js插件
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)