左右图片切换

原创 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>

使用jquery + css + html实现点击左右箭头切换图片

html页面如下 ,新建indexhtml,拷贝以下内容 复制代码 代码如下: 无标题文档                         ...

jquery全屏左右切换图片焦点图代码

  • 2012年12月27日 15:07
  • 1.14MB
  • 下载

jquery图片左右切换效果源代码

  • 2016年01月31日 11:26
  • 114KB
  • 下载

点击查看大图,支持左右滑动切换、缩放图片

效果图:  列表上显示图片的缩略图,要求点击查看大图,支持缩放和左右滑动切换,效果如上图,前面几个项目遇到过很多次这个需求,索性花点时间整理成一个工具类。  显示缩略图的代码就不写了,...

仿京东图片左右切换效果jquery

今天产品搞了个京东的效果,仿造啊,完全是仿造。。。唉,没办法,仿造还是要造,,,虽是仿造,但是JS是原创, 效果图如下: 代码: 仿京东图片展示效果 $(func...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:左右图片切换
举报原因:
原因补充:

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