解决方案 »

  1.   

    现在上下是好了但是请问下怎么左右动啊想163相册那种的
      

  2.   

    折腾了一个晚上..  IE only 兼容行还没怎么系统的学过..  应该还有bug没测试出来....
    <style type="text/css">
    <!--
    #top{background-color:#EBEBEB;height:30px;width:560px;padding:5px 0 0 25px;}
    #center{background:#F4F4F4;width:560px;height:376px;padding:5px;}
    #contain{background:#F4F4F4;width:550px;height:366px;overflow: hidden;}
    #a{width:5000px;height:366px;}
    #bottom{background:#EBEBEB;height:60px;width:560px;}
    #bl{height:60px;width:22px;float:left;}
    #bb{height:60px;width:515px;float:left;padding:5px;}
    #bcontain{height:50px;width:500px;overflow: hidden;}
    #b{height:50px;width:4000px;}
    #br{height:60px;width:19px;}
    .tu{height:50px; width:100px; float:left; text-align:center; cursor:pointer;filter:Alpha(opacity=30);}
    -->
    </style><div id="top"></div><div id="center">
    <div id="contain">  
    <div id="a">
    <img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165953937.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170058856.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170157807.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165953937.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170058856.p.jpg" /><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170157807.p.jpg" />
    </div>
    </div>
    </div><div id="bottom">
    <div id="bl"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165259893.t.gif" onclick="Back()" style="cursor:hand;" /></div>
    <div id="bb">
    <div id="bcontain">
    <div id="b">
    <div class="tu" style="filter:Alpha(opacity=100)"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" height="50" width="75" onclick="move()" /></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" height="50" width="75" onclick="move()"/></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" height="50" width="75" onclick="move()"/></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" height="50" width="75" onclick="move()"/></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165953937.p.jpg" height="50" width="75" onclick="move()"/></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170058856.p.jpg" height="50" width="75" onclick="move()"/></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170157807.p.jpg" height="50" width="75" onclick="move()"/></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" height="50" width="75" onclick="move()"/></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" height="50" width="75" onclick="move()"/></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" height="50" width="75" onclick="move()"/></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" height="50" width="75" onclick="move()"/></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165953937.p.jpg" height="50" width="75" onclick="move()"/></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170058856.p.jpg" height="50" width="75" onclick="move()"/></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170157807.p.jpg" height="50" width="75" onclick="move()"/></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg" height="50" width="75" onclick="move()"/></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg" height="50" width="75" onclick="move()"/></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg" height="50" width="75" onclick="move()"/></div>
    <div class="tu"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg" height="50" width="75" onclick="move()"/></div>
    </div>
    </div>
    </div>
    <div id="br"><img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165005229.t.gif" onclick="Forward()" style="cursor:hand;" ></div>
    </div><script>
    var contain  = document.getElementById("contain")
    var bcontain = document.getElementById("bcontain")
    var cun =0
    function Forward(){
    if(contain.scrollLeft>7*550)
    contain.scrollLeft=contain.scrollLeft-7*550
    if(bcontain.scrollLeft>7*100)
    bcontain.scrollLeft=bcontain.scrollLeft-700
    for(i=0;i<50;i++)
    {bcontain.scrollLeft=bcontain.scrollLeft+2
    contain.scrollLeft=contain.scrollLeft+11}
    document.getElementById("b").getElementsByTagName("div")[cun].style.filter="Alpha(opacity=30)"
    cun=bcontain.scrollLeft/100
    document.getElementById("b").getElementsByTagName("div")[bcontain.scrollLeft/100].style.filter="Alpha(opacity=100)"
    }function Back(){
    if(contain.scrollLeft==0)
    contain.scrollLeft=7*550
    if(bcontain.scrollLeft==0)
    bcontain.scrollLeft=7*100
    for(i=0;i<50;i++)
    {
    bcontain.scrollLeft=bcontain.scrollLeft-2
    contain.scrollLeft=contain.scrollLeft-11}
    document.getElementById("b").getElementsByTagName("div")[cun].style.filter="Alpha(opacity=30)"
    cun=bcontain.scrollLeft/100
    document.getElementById("b").getElementsByTagName("div")[bcontain.scrollLeft/100].style.filter="Alpha(opacity=100)"
    }function move(e){
    document.getElementById("b").getElementsByTagName("div")[cun].style.filter="Alpha(opacity=30)"
    e =e||event
    var num=0
    var img = document.getElementById("b").getElementsByTagName("img")
    for(var i=0;i<img.length;i++)
       {if(img[i]==e.srcElement)
           {num=i;break}}if(num<=13)
    {
      if(bcontain.scrollLeft==num*100)
      {return}
      else
      {
      var pan =num-bcontain.scrollLeft/100
      for(i=0;i<50*pan;i++)
    {if(contain.scrollLeft==7*550)
    contain.scrollLeft=0
    bcontain.scrollLeft=bcontain.scrollLeft+2
    contain.scrollLeft=contain.scrollLeft+11}}
    }if(num>13)
    {
    num=num-7
    bcontain.scrollLeft=bcontain.scrollLeft-7*100
    if(bcontain.scrollLeft==num*100)
      {return}
      else
      {
      var pan =num-bcontain.scrollLeft/100
      for(i=0;i<50*pan;i++)
    {if(contain.scrollLeft==7*550)
    contain.scrollLeft=0
    bcontain.scrollLeft=bcontain.scrollLeft+2
    contain.scrollLeft=contain.scrollLeft+11}}
    }cun=bcontain.scrollLeft/100
    document.getElementById("b").getElementsByTagName("div")[bcontain.scrollLeft/100].style.filter="Alpha(opacity=100)"
    }
    </script>