javascript做个图片展览时遇到了小麻烦，请各位指教。
各位朋友：
以下代码为我初学JS写的一个片断，遇到了麻烦：
1，数字的样式问题，如何只给当前span添加样式，并去掉兄弟span的样式.
2，将红色片断去掉注释，还是样式的问题！不知道如何搞才好！
请各位帮我看看，谢谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css">
span.over { border:1px solid red; padding:4px; }
</style>
</head>
<body>
<div id="pic"> <img src="http://pic.yesky.com/imagelist/10/06/11703114_3562.jpg" id="showPic" /> </div>
<span title="http://pic.yesky.com/imagelist/10/06/11703114_3562.jpg" >1</span> <span title="http://pic.yesky.com/imagelist/10/06/11703115_9992.jpg" >2</span> <span title="http://pic.yesky.com/imagelist/10/06/11703481_277.jpg" >3</span> <span title="http://pic.yesky.com/imagelist/10/06/11703482_4586.jpg" >4</span>
<script>
var span=document.getElementsByTagName("span");
var showPic=document.getElementById("showPic");
var j=0;
//for(var i=0;i<span.length;i++){
// span[i].onclick=function(){
// var title=this.getAttribute("title");
// showPic.setAttribute("src",title);
// this.className="over";
// }
// }
setInterval(function(){
var title=span[j].getAttribute("title");
showPic.setAttribute("src",title);
span[j].className="over";
j++;
if(j>=span.length)j=0;
},1000);
</script>
</body>
</html>
[color=red]我的代码帮你实现了，如何在点击完毕后接下来顺序切换的功能。[/color]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1
2
3
4
这应该可以满足你的要求了。记得给我加点分。谢谢！！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1
2
3
4
[color=red]我再次改后的代码，可以满足你的要求了。[/color]