script

     用 script 做的轮播图片代码： 

<div id="nav">

      <div id="demo">
        <div id="indemo">
          <div id="demo1">
                 <ul><li class="p"> <a href="#"> <img src="#"  alt="图3" /> </a>
     <p class="title"> <a href="#">图3</a></p>
</li>
<li class="p"> <a href="#"> <img src="#"  alt="图2" /> </a>
     <p class="title"> <a href="#">图2</a></p>
</li>
<li class="p"> <a href="#"> <img src="#"  alt="图1" /> </a>
     <p class="title"> <a href="#">图1</a></p>
</li>
</ul>
         </div> 

 <script>

     <!--
     var speed=10;
     var tab=document.getElementById("dmo");
     var tab1=document.getElementById("dmo1");
     var tab2=document.getElementById("dmo2");
       tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
    -->

    </script>

</div>

再用css代码：

#nav {width:715px; height:100%; margin:0 auto;}

#demo{width:715px; height:157px; margin:0 auto; overflow:hidden; background:#FFF; margin-top:8px;}
#demo img{border:1px solid #cecfcf; margin-right:24px;}
#indemo{float:left; width:800%; background:#f0f4f4;}
#demo1{float:left; }
#demo2{float:left;}
#indemo ul li{float:left; margin-right:15px;}
#indemo ul li p{line-height:20px; text-align:center; padding-top:15px;}