仿腾讯图片新闻浏览效果

最新推荐文章于 2018-06-05 13:39:00 发布

C979170768

最新推荐文章于 2018-06-05 13:39:00 发布

阅读量4.1k

点赞数

文章标签：腾讯 function border table class xhtml

本文链接：https://blog.csdn.net/C979170768/article/details/7353704

版权

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("table tr td img[name=1]").click(function () {
                //这里是清除原来的状态
                $("table tr td img[name=1]").each(function () {
                    $(this).css("border", "0px");
                });
                //这里设置当前选中的项
                $(this).css("border", "3px green solid");
                $("#disp").attr("src", $(this).attr("src"));
                count = $(this).attr("id");        //给下面的下标赋值

            })
            //以上是向下边动
            //            $("#disp").click(function () {

            //            })
            //鼠标移上去的时候显示左右按钮
            $("#disp").mouseover(function () {
                //                $("#left").css({ top: 150, left: 20 });
                //                $("#right").css({ top: 150, left: 710 });
                $("#left").show();
                $("#right").show();

            })
            //鼠标移上去的时候显示左右按钮
            $("#disp").mouseleave(function () {
                $("#left").hide();
                $("#right").hide();

            })
            //绑定Left事件
            var count = 1;

            $("#left").bind("click", function () {
                count--;
                if (count < 1) {
                    count = 5;
                }
                $("#disp").attr("src", "Image/" + count + ".jpg");
                //消除所有原来的状态
                $("table tr td img[name=1]").each(function () {
                    $(this).css("border", "0px");
                });

$("table tr td img[id=" + count + "]").css("border", "3px green solid");

            });
            //绑定Rigth 事件
            $("#right").bind("click", function () {
                count++;
                if (count > 5) {
                    count = 1;
                }
                $("#disp").attr("src", "Image/" + count + ".jpg");
                //消除原来的状态
                $("table tr td img[name=1]").each(function () {
                    $(this).css("border", "0px");
                });

                $("table tr td img[id=" + count + "]").css("border", "3px green solid");
            });
            //
            $("#left").mouseover(function () {
                $("#left").show();
            })

            $("#right").mouseover(function () {
                $("#right").show();
            })

        })

    </script>
    <style type="text/css">
        .style1
        {
            width: 101%;
        }
        .style2
        {
            text-align: center;
        }
        .choseimg
        {
             border:3px green solid;

            }
        .nochoseimg
        {
             border:1px red solid;

            }
        #left
        {
           position:absolute;
           float:left;
           width: 152px;
           height: 90px;
           display:none;
           top:150px;
           left: 20px;
            }
       #right
       {
          position:absolute;
          float:right;
          width: 152px;
          height: 90px;
          display:none;
          top: 150px;
          left: 710px;

        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 858px">

        <table class="style1">
            <tr>
                <td class="style2">
                    <img id="disp" alt="" src="Image/1.jpg" style="height: 361px; width: 846px" /></td>
            </tr>
            <tr>
                <td class="style2">
                    <table style="width:100%;">
                        <tr>
                            <td>
                                <img id="1" alt="" name="1" src="Image/1.jpg" style="height: 110px; width: 165px" /></td>
                            <td>
                                <img id="2" alt="" name="1" src="Image/2.jpg" style="height: 110px; width: 175px" /></td>
                            <td>
                                <img id="3" alt="" name="1" src="Image/3.jpg" style="height: 110px; width: 151px" /></td>
                            <td>
                                <img id="4" alt="" name="1" src="Image/4.jpg" style="height: 110px; width: 151px" /></td>
                            <td>
                                <img id="5" alt="" name="1" src="Image/5.jpg" style="height: 110px; width: 172px" /></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

    </div>
    </form>
    <div id="left"><img id="goleft" src="Image/left.png" /></div>
     <div id="right"><img id="gorigth" src="Image/right.png" /></div>

</body>
</html>

C979170768

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
仿腾讯图片新闻浏览效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> $(function () { $("table tr td img[name=1]").click(function () {
复制链接

扫一扫