左右图片切换

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

带左右箭头图片切换

无标题文档 *{margin:0px;padding:0px;} .con{width:300px;height:200px;margin-left...
  • u012038068
  • u012038068
  • 2016年12月25日 20:31
  • 707

jQuery带左右按钮控制图片切换

代码如下 带左右按钮控制图片切换jQuery幻灯片,jquery焦点图 #owl-demo{position:relative;width:640px;height:390px;marg...
  • wenzhilanyu2012
  • wenzhilanyu2012
  • 2015年09月05日 20:05
  • 1592

图片滑动切换效果(用bootstrap来实现)

1:因为我的框架用的是bootstrap,所以我希望在bootstrap的框架下,实现图片的滑动切换效果。 2:然后网上搜索了一下,需要用到Bootstrap 框架中的 carousel 插件,自带...
  • u010523770
  • u010523770
  • 2017年01月09日 11:58
  • 3546

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

今天产品搞了个京东的效果,仿造啊,完全是仿造。。。唉,没办法,仿造还是要造,,,虽是仿造,但是JS是原创, 效果图如下: 代码: 仿京东图片展示效果 $(func...
  • acongshijia
  • acongshijia
  • 2013年04月17日 18:40
  • 1737

左右滑动切换图片

运行效果图 修改布局文件activity_main.xml:
  • zsh157621866651
  • zsh157621866651
  • 2016年06月17日 15:35
  • 1073

js实现简单的图片切换

放在 function picShow(nwhich) { if(!document.getElementById) return; if(nwhich==2) { docum...
  • zurich1979
  • zurich1979
  • 2014年09月11日 14:27
  • 1571

Web前端学习——JS基础二之图片切换

学习的话更多的是通过视频学习获取知识点,做相应的练习来提升自己~~ 题目: 编写一个图片切换,类似于百度图片点击一个之后的界面 功能: 可点击进入下一张图片,可点击进入上一张图片 DEMO: ...
  • Elson_tju
  • Elson_tju
  • 2015年07月19日 14:20
  • 1214

js左右箭头图片切换

#content{ width: 600px; height: 501px; position: relative; margin: 40px auto; } #content a{ wid...
  • Qian_Chan_
  • Qian_Chan_
  • 2014年11月13日 19:31
  • 467

Android左右图片切换(可自动)

  本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和门户网站都有类似的实现:   具体思路:   1. 工程中需要添加android-suppor...
  • kc58236582
  • kc58236582
  • 2015年11月18日 09:39
  • 1285

MFC操作——图片切换

MFC添加一个按钮和几个图片,当点击按钮时更换图片 #define MAX_COUNT 3 // 例如在资源中创建3张bmp图片,ID号连续 // 定义成员变量 int nIndex =...
  • cddchina
  • cddchina
  • 2012年10月18日 16:50
  • 4691
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:左右图片切换
举报原因:
原因补充:

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