<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html lang=it dir=ltr xml:lang="it" xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">

<head>

<title><a target="_blank" href="http://www.daydiy.cn/" class="UBBWordLink">css</a>+jsͼƬչʾ</title>

<style>

<style>

body{

  padding: 0px;

  margin: 0px;

  font: 70% verdana, geneva, arial, helvetica, sans-serif;

  color: #000;

  text-align: center

  }

#outer{

  padding: 0px;

  margin: 0px;

  width: 800px;

  text-align: center

  }

#focus{

 border: #ccc 2px solid;

 margin: 0px;

 padding: 0px;

 padding-top: 15px;

 background: url(/images/tile.gif) #eee repeat-y left top;

 width:490px;

 position: relative;

 height: 153px

  }

#description,

#description2{

 width:391px;/*=188*2+15*1 */

 height:148px;

 overflow:hidden;

 margin-right:15px;

 float:left;

  }

.dis{

 float:left;

 width:40px;

 text-align: center;

 padding-top:50px

}

#description ul, #description li ,

#description2 ul, #description2 li {

float:left;

display: inline;

margin: 0;

padding: 0;

height:150px

}

#description li a,

#description2 li a{

 display:block; border:1px solid #CCC; background-color:#FFFFFF; width:188px; height:148px;}

.content a:active,

.content a:visited,

.content a:link {

display: inline;

text-decoration: none;

width:188px;

height:145px;

}

.content a:hover {

width:188px;

height:145px;

 color: #ffffff;

 display: inline;

 text-decoration: none;

}

img {border:0px}

</STYLE>

</head>

<body>

<div id=outer>

   <div id=focus>

<!--0001-->

      <div class="dis"><button onClick="doSlide(-1)"></button></div>

  <div id=description class=description>

        <div id="content0">

        <ul id="content"  class=content>        

          <li><a href="#">1</a></li>

          <li><a href="#">2</a></li>

          <li><a href="#">3</a></li>

          <li><a href="#">4</a></li>

        </ul>

        </div>

      </div>

      <div class="dis"><button onClick="doSlide(1)" ></button></div>

  </div>

    <!--002-->

      <div id=focus>

      <div class="dis"><button onClick="doSlide(-1)"></button> </div>

      <div id=description2 class=description>

        <div id="content02">

        <ul id="content"  class=content>        

          <li><a href="#">1</a></li>

          <li><a href="#">2</a></li>

          <li><a href="#">3</a></li>

          <li><a href="#">4</a></li>

        </ul>

        </div>

      </div>

      <div class="dis"><button onClick="doSlide(1)"></button></div>

    </div>

</div>

<script>

var img_pad=5//ͼƬ

var img_w=188//ͼƬ

var img_n=2//ÿͼƬ

document.write ("<style>.content a {padding: 0 "+ img_pad+" 0 0;}</style>")

var win_w=img_w*img_n+(img_pad*2)*(img_n-1)

document.getElementById("description").style.width=win_w

document.getElementById("description2").style.width=win_w

document.getElementById("content0").innerHTML+=document.getElementById("content0").innerHTML

document.getElementById("content02").innerHTML+=document.getElementById("content02").innerHTML

var ok_obj=document.getElementById("content0").getElementsByTagName("LI")

var ok=Math.ceil(ok_obj.length/2)-1;

document.getElementById("content0").style.width=(ok+1)*win_w

document.getElementById("content02").style.width=(ok+1)*win_w

var ele=document.getElementById("description");

var ele2=document.getElementById("description2");

  var w=ele.clientWidth;

  var n=20,t=50;

  var timers=new Array(n);

  var k=0;doSlide(0);

  

var ss=1,t2

function doSlide(s){

clearTimeout(t2);

ss=s;

  if (k>=ok &&s>0){ele.scrollLeft=w;k=1;

       ele2.scrollLeft=w;

    };

  if (k<1 &&s<0){ele.scrollLeft=(ok-1)*w;k=ok-1

       ele.scrollLeft=(ok-1)*w;

    };

  k+=s;

    var x=ele.scrollLeft

    var d=k*w-x;

    for(var i=0;i<n;i++)(

     function(){

      if(timers[i]) clearTimeout(timers[i]);

      var j=i;

//      alert(x)

      timers[i]=setTimeout(function(){

       ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));

       ele2.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));

       },(i+1)*t);

     }

    )(); t2=setTimeout ("auto_scroll()",3000)

}

function auto_scroll(){

doSlide(ss)

//var t2=setTimeout ("auto_scroll()",3600)

}

setTimeout ("auto_scroll()",2000)

</script>

</body>

</html>