jquery幻灯片效果

<styletype="text/css">

#play{width:511px;height:346px;border:#ccc0pxsolid;}

#playNum{margin:320px5px0320px;z-index:10;width:145px;text-align:center;position:absolute;height:25px;}

#playNumspan{float:right;margin:02px;width:18px;height:20px;cursor:pointer;color:#000;background-image:url(images/circle1.png);background-repeat:no-repeat;text-align:center}

#playNumspana{display:none;}

#playShowimg{width:473px;height:346px;}

</style>

<scriptlanguage="JavaScript"type="text/javascript">

vart=n=0,count=$("#playShowimg").size();

$(function(){

$("#playShowimg:not(:first-child)").hide();

$("#playNumspan:first").css({"background":"url(images/circle1.png)"});

$("#playNumspan").click(function(){

vari=$(this).text()-1;

if(i>=count)return;

$("#playShowimg").filter(":visible").hide().parent().children().eq(i).fadeIn(3000);

$(this).css({"background":"url(images/circle1.png)"}).siblings().css({"background":"url(images/circle2.png)"});

});

t=setInterval("autoShow()",4000);

$("#play").hover(function(){clearInterval(t)},function(){t=setInterval("autoShow()",4000);});

});

functionautoShow(){

n=n>=(count-1)?0:++n;

if(n==0)

$("#playNumspan").eq(2).trigger('click');

elseif(n==1)

$("#playNumspan").eq(1).trigger('click');

else

$("#playNumspan").eq(0).trigger('click');

}

</script>

相关推荐