js 简单图片切换 - 带标签

 <div id="pic" style="position:relative;height:600px;width:600px">
    <img src="http://dl.iteye.com/upload/picture/pic/109739/28faf72f-a866-3151-8b51-3d3f4cc6a095.png"/>
    <img src="http://dl.iteye.com/upload/picture/pic/109751/c027ba99-2889-3365-8dd1-47f65991b47d.png" style="display:none"/>
    <img src="http://dl.iteye.com/upload/picture/pic/109749/abfeb883-1caf-3c00-96e7-6594930c0ae5.png" style="display:none"/>
    <img src="http://dl.iteye.com/upload/picture/pic/109753/77a99704-9402-3f97-b0f1-d0cae74d8772.png" style="display:none"/>
    <div style="position:absolute;right:20px;bottom:10px">
        <span onclick="set(0)" class="a2">1</span>
        <span onclick="set(1)" class="a1">2</span>
        <span onclick="set(2)" class="a1">3</span>
        <span onclick="set(3)" class="a1">4</span>
    </div>
     <script type="text/javascript">
   (function(){ var a = document.getElementById('pic'); var l = a.getElementsByTagName('img'); var b = a.getElementsByTagName('span'); window.set=function(n){ for(i=0; i<l.length; i++) {l[i].style.display='none'; b[i].className='a1';} l[n].style.display='inline'; b[n].className='a2'; }; window.n = 1; setInterval(function(){window.set(window.n%l.length);window.n++;}, 2000); } ) ();
   </script>
    <style type="text/css">
    span.a1 {padding:1px 5px;color:#fff;background-color:#3C3638;cursor:pointer}
    span.a2 {padding:1px 5px;color:#fff;background-color:#C4571C;cursor:pointer}
    </style>
 </div>
 

 每隔2秒切换div(#pic)内的图片，可以点击标签1,2,3,4手动切换。

(用时建议把图片切割成同样大小)