两张图片轮流切换

<script>
var t ;
$(function(){
changeImg();

$(“#span01″).mouseover(function(){
showOrHide(“01″,”02″);
clearTimeout(t);
});
$(“#span01″).mouseout(function(){
t = setTimeout(“changeImg()”,”4000″);
});

$(“#span02″).mouseover(function(){
showOrHide(“02″,”01″);
clearTimeout(t);
});
$(“#span02″).mouseout(function(){
t = setTimeout(“changeImg()”,”4000″);
});

$(“#span02″).click(function(){
showOrHide(“02″,”01″);
});

$(“#span01″).click(function(){
showOrHide(“01″,”02″);
});

});
function changeImg(){
var temp = $(“#01″).is(“:hidden”); //是否隐藏
if(temp){
showOrHide(“01″,”02″);
}else{
showOrHide(“02″,”01″);
}
t = setTimeout(“changeImg()”,”4000″);
}

function showOrHide(imgs1,imgs2){
var img1 =”#”+imgs1;
var img2 = “#”+imgs2;
var span1 = “#span”+imgs1;
var span2 = “#span”+imgs2;
$(img2).fadeOut(“4000″);
$(img1).fadeIn(“4000″);
$(span2).removeClass(“on”);
$(span1).addClass(“on”);
}
</script>
<div style=”position:relative”>
<div style=”position:absolute;left:0;top:0″ id = “02″>
<img id=”02″ src=”@{‘/public/images/02.jpg’}” style=”display:inline-block” />
</div>
<div style=”position:absolute;left:0;top:0″ id=”01″ >
<img id=”01″ src=”@{‘/public/images/01.jpg’}” style=”display:inline-block” />
</div>
<cite class=”Nubbt”><span class=”on” id=”span01″>1</span><span id=”span02″>2</span></cite>
</div>

http://blog.163.com/zhangguo_199059/blog/#m=0