ASP.NET图片轮播效果实现教程

ASP.NET实现图片不间断滚动，鼠标经过图片后图片放大JS页面特效 2009-10-28 18:07:28 阅读721 评论0 字号：大中小 
<!--图片鼠标放上放大 开始-->
    <div id="a1" style=" position:absolute; z-index:2;"></div>
<!--循环开始-->
      <div align='center' id='demo' style="overflow:hidden;height:160px;width:291px;"> 
   <table border='0' align='center' cellpadding='0' cellspacing="0">
     <tr> 
        <td id='demo1' valign='top'>
     <table width="110" border="0" cellspacing="0" cellpadding="0">
              <tr>
              <!--图片数据循环调用开始--->
                 <td valign="top">
                    <table width="100%" height="auto" border="0" cellspacing="2" cellpadding="0"class="img02">
                         <tr align="center" valign="middle"> 
                            <td>
     <asp:DataList ID="img_showlist_dl" runat="server" CellPadding="0" RepeatDirection="Horizontal">
       <ItemTemplate>
          <img src='../<%# Eval("photo") %>' title="<%# Eval("title") %>" alt="<%# Eval("alt") %>" style="width:50px; height :80px;" onmousemove="show(event,'../<%# Eval("photo") %>','<%# Eval("title") %>')"   onmouseout="hide(this)" >
       </ItemTemplate>
     </asp:DataList>
     </td>
      </tr>
                      </table>
                  </td>
               <!--图片数据循环调用结束--->
               </tr>
            </table></td>
         <td id="demo2" valign="top"></td>
      </tr>
   </table>

</div>
<script type="text/javascript" language="javascript">
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script>
<!--循环结束-->

<!---------->

<script>
function show(event,_this,mess) {
    event = event || window.event;
    var t1="<table     cellspacing='1' cellpadding='10' style='border-color:#CCCCCC;background-color:#FFFFFF;font-size:12px;border-style:solid;    border-width:thin;text-align:center;'><tr><td><img src='" + _this   + "' width='300' height='225' >    <br>"+mess+"</td></tr></table>";
     document.getElementById("a1").innerHTML =t1;
      //document.getElementById("a1").innerHTML = "<img src='" + _this.src + "' >";
   document.getElementById("a1").style.top   = document.body.scrollTop + event.clientY + 10 + "px";
   document.getElementById("a1").style.left = document.body.scrollLeft + event.clientX + 10 + "px";
    document.getElementById("a1").style.display = "block";
}
function hide(_this) {