水波形图片切换

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="top.ascx.cs" Inherits="Ascx_top" %>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-29308514-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

 <script  type="text/javascript" language="javascript">
    function jiaohuandao(tdid1,tdid2){

       
        window.document.getElementById(tdid1).style.display = 'none';
        window.document.getElementById(tdid2).style.display = 'block';
       }
      
       function huanimg(divid,imgid){
      
        window.document.getElementById(divid).style.backgroundImage = "url(images/"+imgid +".jpg)";
       }
      
   
    </script>
   <script type="text/javascript">   
    function correctPNG()   
     {   
        for(var i=0; i<document.images.length; i++)   
         {   
            var img = document.images[i]   
            var imgName = img.src.toUpperCase()   
            if (imgName.substring(imgName.length-3, imgName.length) == "PNG")   
             {   
                var imgID = (img.id) ? "id='" + img.id + "' " : ""  
                var imgClass = (img.className) ? "class='" + img.className + "' " : ""  
                var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "  
                var imgStyle = "display:inline-block;" + img.style.cssText   
                if (img.align == "left") imgStyle = "float:left;" + imgStyle   
                if (img.align == "right") imgStyle = "float:right;" + imgStyle   
                if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle   
                var strNewHTML = "<span " + imgID + imgClass + imgTitle   
                 + " style=\"" + "" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"  
                 + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"  
                 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"  
                 img.outerHTML = strNewHTML   
                 i = i-1   
             }   
         }   
     }   
     window.attachEvent("onload", correctPNG);   
</script> 
<style type="text/css">
       

 a {     /*无设置时的样式*/
        
    color:#000;
     font-family:微软雅黑;
      }
   
    a:link {        /*正常链接的样式*/
    font-family:微软雅黑;
    color:#000;
    text-decoration:none;
      }
   
    a:visited {     /*点过后的样式underline*/
    font-family:微软雅黑;
    text-decoration:none;
    }
  
    a:hover {       /*鼠标移上的样式*/
    font-family:微软雅黑;
    text-decoration:none;
    }
   
   

body{
 font-family:微软雅黑;
}
   
</style>
<style type="text/css">
* {margin:0;padding:0;}
a:visited {     /*点过后的样式underline*/
    font-family:微软雅黑;
    text-decoration:none;
    }
#jsF {position:relative;margin:0;270px;height:185px;overflow:hidden;}
#jsF ul {position:absolute;top:0;left:0;list-style-type:none;z-index:1; border:none;}
#jsF li {display:block;position:absolute;top:0;margin:0;padding:0;overflow:hidden; border:none;}
</style>
   <div>
<div style="100%; height:271px; overflow:hidden; background-image:url(admin/<%= u1 %>); background-repeat:repeat; background-position:center;  ">

<div id="jsF"></div>
<div id="debug"></div>
<script>
//<[CDATA[
var jsF = document.getElementById('jsF');
var speed1 = 50, speed2 = 2000;
var iA = 0, iB = 0, iC = 0;
var bD = [];
var aImg = ['Admin/<%= u1 %>','Admin/<%= u2 %>','Admin/<%= u3 %>' ];
var aLink = ['#','#','#'];
var iImgWidth = 1422, iImgHeight = 271;
var iDivWidth = iImgWidth/10;
jsF.style.width = iImgWidth + 'px';
jsF.style.height = iImgHeight + 'px';
jsF.style.border = 0;
var oImg = [];
oImg[0] = new Image();
oImg[0].src = aImg[0];
oImg[1] = new Image();
oImg[1].src = aImg[1];
window.onload = function() {
 jsF_create();
}
function jsF_create() {
 if (aImg[iA+2] && !bD[iA+2]){
  oImg[iA+2] = new Image();
  oImg[iA+2].src = aImg[iA+2];
 }
 if (!bD[iA]) {
  var oUl = document.createElement('ul');
  /*oUl.style.position = 'absolute';
  oUl.style.top = '0';
  oUl.style.left = '0';*/
  oUl.style.width = iImgWidth + 'px';
  oUl.style.height = iImgHeight + 'px';
  oUl.style.border = 0;
  var oUlLi = document.createElement('li');
  oUlLi.style.right = '0';
  oUlLi.style.width = iDivWidth +'px';
  oUlLi.style.height = iImgHeight + 'px';
  oUlLi.style.border = 0;
  var oLiA = document.createElement('a');
  oLiA.href = aLink[iA];
  var oLiImg = document.createElement('img');
  oLiImg.src = oImg[iA].src;
  oLiImg.style.marginLeft = -9*iDivWidth + 'px';
  oLiA.appendChild(oLiImg);
  oUlLi.appendChild(oLiA);
  oUl.appendChild(oUlLi);
  for (var i=0; i<10; i++) {
   oUlLi = document.createElement('li');
   oUlLi.style.right = i*iDivWidth + 'px';
   oUlLi.style.width = 1.5*iDivWidth +'px';
   oUlLi.style.height = iImgHeight + 'px';
   oUlLi.style.border =0;
   //oUlLi.style.background = color[i];
   oLiA = document.createElement('a');
   oLiA.href = aLink[iA];
   oLiImg = document.createElement('img');
   oLiImg.src = oImg[iA].src;
   oLiImg.style.marginLeft = -9*iDivWidth + 'px';
   oLiA.appendChild(oLiImg);
   oUlLi.appendChild(oLiA);
   //oUlLi.appendChild(document.createTextNode(i));
   oUl.appendChild(oUlLi);
  }
  jsF.appendChild(oUl);
  bD[iA] = !bD[iA];
 }
 jsF_show();
 //document.getElementById('debug').innerText = jsF.innerHTML;
}
// http://www.codefans.net
function jsF_show(){
 var oUl = jsF.getElementsByTagName('ul');
 var oLi = oUl[iA].getElementsByTagName('li');
 var oImgs = oUl[iA].getElementsByTagName('img');
 oUl[iA].style.zIndex = ++iC;
 for (var i=1; i<11; i++){
  oImgs[i].style.marginLeft = -9*iDivWidth + 'px';
  oImgs[i].style.visibility = 'hidden';
  oImgs[i].style.border = 0;
 }
 jsF_move();
}
function jsF_move(){
 var oUl = jsF.getElementsByTagName('ul');
 var oLi = oUl[iA].getElementsByTagName('li');
 var oImgs = oUl[iA].getElementsByTagName('img');
 if (iB++<10)
  oImgs[iB].style.visibility = 'visible';
 for (var i=1; i<oImgs.length; i++) {
  var iBgpx = parseInt(oImgs[i].style.marginLeft);
  if (iBgpx<(i+0.5)*iDivWidth-iImgWidth) {
   var iMovePx = Math.floor((iImgWidth-(i+0.5)*iDivWidth+iBgpx)/15);
   oImgs[i].style.marginLeft = iBgpx - iMovePx + 'px';
  } else {
   oImgs[i].style.marginLeft = ((i+0.5)*iDivWidth-iImgWidth) + 'px';
  }
 }
 //document.getElementById('debug').innerText = jsF.innerHTML;
 if (parseInt(oImgs[10].style.marginLeft)<0.5*iDivWidth) {
  setTimeout('jsF_move()',speed1);
 } else {
  iB = 0;
  //document.getElementById('debug').innerText = oUl[iA].style.display;
  iA = ++iA==aImg.length ? 0 : iA;
  if (bD[iA]) {
   setTimeout('jsF_show()',speed2);
  } else {
   setTimeout('jsF_create()',speed2);
  }
 }
}
//]]>
</script>

</div>
<div style=" overflow:hidden; 100%;  height:41px;  line-height:41px; background-image:url(images/top2.jpg); background-repeat:repeat; text-align:center; ">
<div style=" 950px; ">
<div οnclick="window.location='index.aspx'" style=" float:left; color:#fff; font-size:14px; cursor:pointer; ">首页</div><div   οnclick="window.location='aboutlb.aspx'"  style=" cursor:pointer;  float:left; margin-left:40px; color:#fff; font-size:14px;">关于乐邦</div>
<div  οnclick="window.location='news_list.aspx'" style="  cursor:pointer; float:left; margin-left:40px; color:#fff; font-size:14px;">乐邦资讯</div><div   οnclick="window.location='pro_list.aspx'"  style=" cursor:pointer;  float:left; margin-left:40px; color:#fff; font-size:14px;">乐邦产品</div>
<div   οnclick="window.location='tg.aspx'"  style="  cursor:pointer; float:left; margin-left:40px; color:#fff; font-size:14px;">乐邦推广</div><div   οnclick="window.location='zs.aspx'"  style="  cursor:pointer; float:left; margin-left:40px; color:#fff; font-size:14px;">乐邦招商</div>
<div   οnclick="window.location='pt.aspx'"  style="  cursor:pointer; float:left; margin-left:40px; color:#fff; font-size:14px;">葡萄酒文化</div><div   οnclick="window.location='hr.aspx'"  style="  cursor:pointer; float:left; margin-left:40px; color:#fff; font-size:14px;">乐邦招贤</div>
<div   οnclick="window.location='callme.aspx'" style="  cursor:pointer; float:left; margin-left:40px; color:#fff; font-size:14px;">联系我们</div><div   οnclick="window.location='messages.aspx'"  style=" cursor:pointer;  float:left; margin-left:40px; color:#fff; font-size:14px;">互动专区</div>
</div>
</div>
</div>