图片滚动并且当鼠标放到图片上时，上面的大图会相应的变化。

最新推荐文章于 2024-01-18 22:18:01 发布

chenguang79

最新推荐文章于 2024-01-18 22:18:01 发布

阅读量4.2k

点赞数

分类专栏： asp.net 文章标签： border server javascript function div class

本文链接：https://blog.csdn.net/chenguang79/article/details/2884619

版权

asp.net 专栏收录该内容

109 篇文章 1 订阅

订阅专栏

最近在工作中，遇到这样一种情况：就是一个页面中，在页面中的正中是一个大的图片显示框，下面是这个图片的说明，最下面是一些滚动的图片
功能说明：
一，从数据库中取出图片，让其在下面滚动。
二，当鼠标放到滚动图片中的一幅时，上面的大图片显示框就显示这个图，并且在图片说明显示相应的说明。

图片滚动其实很好完成。网上有的是现成的代码，就是二个div来完成。
重点鼠标放到滚动图片时，大图片的显示。其实说白了也很简单就是用一段javascript 代码。
不说别的了，我把代码放出来。
1，这是前台显示页面

 
 <!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>
    <style type="text/css">
<!--
@import url("css.css");
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.STYLE1 {
    color: #000000;
    font-weight: bold;
}
.STYLE2 {
    font-size: 12px;
    color: #000000;
}
.STYLE3 {color: #FFFFFF}
-->
</style>

//这里是显示大图片的javasript代码

<script languge="javascript">
     function ViewPic(img)
     {
         var Bimg = document.getElementById("bigimg");       //取得大图片
         var txtTitle = document.getElementById("div1");     //这里是显示相应的图片说明
         Bimg.src = img.src;                                 //大图片的显示
         div1.innerHTML = img.alt;                           //说明的显示，为了能让说明显示，我把说明放到了img的alt属性中
     }
  </script>
</head>
<body bgcolor="#FFFFFF">
    <form id="form1" runat="server">
    <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><uc3:Head ID="Head1" runat="server" />
    </td>
  </tr>
  
  <tr>
    <td align="left" valign="top"><table width="1000" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="211" height="168" valign="top" background="images/index1_19.jpg"><table width="211" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="images/0011_02.jpg" width="208" height="47"></td>
          </tr>
          <tr>
            <td width="208" height="343" valign="top">
                <uc1:Zjhz_left ID="Zjhz_left1" runat="server" />
            </td>
          </tr>
          <tr>
            <td height="385" align="center" valign="bottom"><img src="images/index1_20.jpg" width="211" height="308"></td>
          </tr>
          
        </table></td>
        <td width="958" valign="top"><table width="70" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="792" height="47" align="right" background="images/_03.jpg"><table width="270" border="0" cellpadding="0" cellspacing="0" class="ztorange">
                <tr>
                  <td><span class="STYLE2"> </td>
                  </tr>
              </table>              </td>
          </tr>
          <tr>
            <td height="550" valign="top"><table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td> </td>
              </tr>
              <tr>
                <td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td><img src="images/ffff_03.gif" width="536" height="22"></td>
                  </tr>
                  <tr>
                    <td><table width="536" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td width="25"><img src="images/yyyy-1_05.gif" width="25" height="239"></td>
                        <td width="495">

大图片显示
<img id="bigimg" src="images/1.jpg" width="493" height="237" runat="server">


</td>
                        <td width="16"><img src="images/tttt-1_07.gif" width="22" height="239"></td>
                      </tr>
                    </table></td>
                  </tr>
                  <tr>
                    <td><img src="images/llll-1_07-08.gif" width="536" height="13"></td>
                  </tr>
                  <tr>
                    <td>

//图片说明
<div align="center" class="gaodu" id="div1">
                        </div>


</td>
                  </tr>
                </table>
                  <br>
                  <br>
                  <br>
                  <br></td>
              </tr>
              <tr>
                <td height="120" valign="top"><table width="700" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td><table width="100%" height="120" border="0" align="center" cellpadding="0" cellspacing="1" bordercolor="#CCCCCC" bgcolor="#CCCCCC">
                      <tr>
                        <td bgcolor="#FFFFFF">
                         <div id="demo" style="OVERFLOW:hidden;WIDTH:800px;COLOR:#ffffff">
                                <table cellpadding="0" cellspacing="0" border="0">
                                    <tr>
                                        <td id="demo1" valign="top" align="center">
                                            <table cellpadding="2" cellspacing="0" border="0">
                                                <tr align="center">
                                                    <asp:Repeater ID="Repeater1" Runat="server">
                                                        <ItemTemplate>
                                                            <td>
                                                                <%# IsPic(DataBinder.Eval(Container.DataItem, "title").ToString(), DataBinder.Eval(Container.DataItem, "pic").ToString())%>
                                                            </td>
                                                        </ItemTemplate>
                                                    </asp:Repeater>
                                                </tr>
                                            </table>
                                        </td>
                                        <td id="demo2" valign="top"></td>
                                    </tr>
                                </table>
                            </div>
                            <script>
                                var speed=2//速度数值越大速度越慢
                                demo2.innerHTML=demo1.innerHTML
                                function Marquee(){
                                if(demo2.offsetWidth-demo.scrollLeft<=0)
                                demo.scrollLeft-=demo1.offsetWidth
                                else{
                                demo.scrollLeft++
                                }
                                }
                                var MyMar=setInterval(Marquee,speed)
                                demo.onmouseover=function() {clearInterval(MyMar)}
                                demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
                            </script>
                        </td>
                      </tr>
                    </table></td>
                    
                  </tr>
                </table></td>
              </tr>
            </table>
              <p><br>
            </p>
              <p>  </p>
              <h2> </h2></td></tr>
          <tr>
            <td height="98" valign="bottom"><img src="images/0011_10.jpg" width="792" height="137"></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td align="left" valign="top"><img src="images/index1_21.jpg" width="1000" height="10" alt=""></td>
  </tr>
  <tr>
    <td align="left" valign="top">
        <uc2:Bottom ID="Bottom1" runat="server" />
    </td>
  </tr>
</table>
 

这里我用的是repeater进行显示图片的滚动。

2，下面是后台的代码。其实就是绑定repeater

 
 protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            string strsql = "select title,pic from C_Article where BigClass='走进华泽' and SmallClass='华泽荣誉' order by id desc";
            DataTable dt = db.myTable(strsql);
            this.Repeater1.DataSource = dt;
            this.Repeater1.DataBind();
            this.bigimg.Src = dt.Rows[0]["pic"].ToString();
            dt.Dispose();
        }
    }
    public string IsPic(string Title, string pic)
    {
        return "<img src=/"" + pic + "/" width=/"130/" alt=/"" + Title + "/" height=/"100/" onMouseMove=/"ViewPic(this)/">";
    }
 