网页轮播图片切换效果-优快云博客

本文链接：https://blog.youkuaiyun.com/u011955093/article/details/17142099

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

左右图片切换