首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jquery幻灯片成效

2012-11-23 
jquery幻灯片效果style typetext/css#play{width:511pxheight:346px border:#ccc 0px solid}#play

jquery幻灯片效果
<style type="text/css">
    #play{width:511px;height:346px; border:#ccc 0px solid;}
    #playNum{margin:320px 5px 0 320px;z-index:10;width:145px; text-align:center;position:absolute;height:25px;}
    #playNum span{float:right;margin:0 2px;width:18px;height:20px;cursor:pointer;color:#000;background-image:url(images/circle1.png);background-repeat:no-repeat;text-align:center}
    #playNum span a{display:none;}
#playShow img{width:473px;height:346px;}
</style>


<script language="JavaScript" type="text/javascript">
    var t=n=0,count=$("#playShow img").size();
    $(function(){
        $("#playShow img:not(:first-child)").hide(); 
        $("#playNum span:first").css({"background":"url(images/circle1.png)"});
        $("#playNum span").click(function(){
            var i=$(this).text()-1;
            if(i>=count)return ;
            $("#playShow img").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);});
               
    });
        function autoShow(){
            n=n>=(count-1) ? 0:++n;
if(n==0)
            $("#playNum span").eq(2).trigger('click');
else if(n==1)
            $("#playNum span").eq(1).trigger('click');
else
            $("#playNum span").eq(0).trigger('click');

        }
       
</script> 

热点排行