简单图片切换效果

Question

http://www.yxlady.com/
左边广告栏图片切换效果只要求的效果是，切换图片时，从左到右或者从右到左换图片分不多，高手帮忙！
先谢谢了！

Answer 1

是说要有图片的移动吗？
<div style="position:relative;overflow:hidden;width:100px;">
  <img id="m1" src="j1.jpg" width="100" style="position:absolute;left:0;" />
  <img id="m2" src="j2.jpg" width="100" style="position:absolute;left:100;" />
</div>
<script>
setInterval('moveImg()',100);
function moveImg() {
  document.getElementById('m1').left--;
  document.getElementById('m2').left--;
}
</script>
大概是这样的效果？？

Answer 2

<div class="text">
      <ul id="con" onmouseover="clearAuto();" onMouseOut="setAuto()">
        <li>[<a title="发型DIY" href="/beautify/List/List_206.shtml" target="_blank">发型DIY</a>]<a href="/beautify/2009-08-12/261817.shtml" title="甜美可爱公主发型" target="_blank">甜美可爱公主发型</a></li>
        <li style="display:none">[<a title="排毒清体" href="/health/List/List_231.shtml" target="_blank">排毒清体</a>]<a href="/health/2009-08-12/261890.shtml" title="炎炎夏日排毒下火瘦身食品" target="_blank">炎炎夏日排毒下火瘦身食品</a></li>
        <li style="display:none">[<a title="大牌专区" href="/clothes/List/List_229.shtml" target="_blank">大牌专区</a>]<a href="/clothes/2009-08-05/260246.shtml" title="09广告大片-无QS不时尚" target="_blank">09广告大片-无QS不时尚</a></li>
        <li style="display:none">[<a title="品位艺术" href="/fashion/List/List_1086.shtml" target="_blank">品位艺术</a>]<a href="/fashion/2009-08-01/258901.shtml" title="另辟蹊径的疯狂艺术家" target="_blank">另辟蹊径的疯狂艺术家</a></li>
        <li style="display:none">[<a title="爱情文摘" href="/affections/List/List_1080.shtml" target="_blank">爱情文摘</a>]<a href="/affections/2009-08-07/260635.shtml" title="可不可以这样爱" target="_blank">可不可以这样爱</a></li>
        <li style="display:none">[<a title="言谈举止" href="/convenance/List/List_1105.shtml" target="_blank">言谈举止</a>]<a href="/convenance/2009-08-05/260260.shtml" title="怎样人见人爱有个好人缘呢" target="_blank">怎样人见人爱有个好人缘呢</a></li>
        <li style="display:none">[<a title="明星丑闻" href="/ent/List/List_1061.shtml" target="_blank">明星丑闻</a>]<a href="/ent/2009-08-13/262087.shtml" title="台湾男歌手涉嫌招妓" target="_blank">台湾男歌手涉嫌招妓</a></li>
        <li style="display:none">[<a title="我要充电" href="/work/List/List_489.shtml" target="_blank">我要充电</a>]<a href="/work/2009-08-03/259255.shtml" title="职场上如何让积极性保鲜？" target="_blank">职场上如何让积极性保鲜？</a></li>
        <li style="display:none">[<a title="时尚家具" href="/housefurnishings/List/List_551.shtml" target="_blank">时尚家具</a>]<a href="/housefurnishings/2009-07-31/258789.shtml" title="白色沙发诠释欧式风格" target="_blank">白色沙发诠释欧式风格</a></li>
        <li style="display:none">[<a title="专业星座" href="/starsigns/List/List_326.shtml" target="_blank">专业星座</a>]<a href="/starsigns/200907/258186.shtml" title="12星座增加桃花运的三方法" target="_blank">12星座增加桃花运的三方法</a></li>
        <li style="display:none">[<a title="家庭教育" href="/tospawn/List/List_347.shtml" target="_blank">家庭教育</a>]<a href="/tospawn/2009-08-05/260175.shtml" title="当代独生子女过早体会着孤独" target="_blank">当代独生子女过早体会着孤独</a></li>
        <li style="display:none">[<a title="社区" href="http://bbs.yxlady.com/" target="_blank">社区</a>]<a href="http://bbs.yxlady.com/viewthread.php?tid=11395&extra=page%3D1" title="09秋天可爱的搭配" target="_blank">09秋天可爱的搭配</a></li>
      </ul>
    </div>
    <div class="nav" >
      <ul id="num">
        <li class="hov"  onmouseover="Mea(0),clearAuto();" onmouseout="setAuto()">01</li>
        <li onmouseover="Mea(1),clearAuto();">02</li>
        <li onmouseover="Mea(2),clearAuto();">03</li>
        <li onmouseover="Mea(3),clearAuto();">04</li>
        <li onmouseover="Mea(4),clearAuto();">05</li>
        <li onmouseover="Mea(5),clearAuto();">06</li>
        <li onmouseover="Mea(6),clearAuto();">07</li>
        <li onmouseover="Mea(7),clearAuto();">08</li>
        <li onmouseover="Mea(8),clearAuto();">09</li>
        <li onmouseover="Mea(9),clearAuto();">10</li>
        <li onmouseover="Mea(10),clearAuto();">11</li>
        <li onmouseover="Mea(11),clearAuto();">12</li>
      </ul>
    </div>
<script type="text/javascript">
var n=0;
var showNum = document.getElementById("num");
function Mea(value){
n=value; setBg(value); plays(value); cons(value);
}
function setBg(value){
for(var i=0;i<12;i++)
   if(value==i)
   {  showNum.getElementsByTagName("li")[i].className='hov'; } 
else
{ showNum.getElementsByTagName("li")[i].className=''; }  
} 
function plays(value){
   try
{  with (fc)
{   filters[0].Apply();
for(i=0;i<12;i++)i==value?children[i].style.display="inline":children[i].style.display="none"; 
filters[0].play(); }
}
catch(e)
{   var divlist = document.getElementById("fc").getElementsByTagName("li");
for(i=0;i<12;i++)
{  i==value?divlist[i].style.display="inline":divlist[i].style.display="none";  }
}
}
function cons(value){
try
{  with (con)
{  for(i=0;i<12;i++)i==value?children[i].style.display="inline":children[i].style.display="none"; }
}
catch(e)
{   var divlist = document.getElementById("con").getElementsByTagName("li");
for(i=0;i<12;i++)
{  i==value?divlist[i].style.display="inline":divlist[i].style.display="none";  }
}
}function clearAuto(){clearInterval(autoStart)}
function setAuto(){autoStart=setInterval("auto(n)", 4000)}
function auto(){
n++;
if(n>11)n=0;
Mea(n);
} 
function sub(){
n--;
if(n<0)n=11;
Mea(n);
} 
setAuto(); </script>