焦点图自动轮播

[css]代码库

html:


<div class="flash">

        <div class="pic_box">

            <div id="imgshow">

                <div id="img01"><a href="javascript:void(0)" target="_blank"><img src="/images/ZZZ_01.jpg" alt="焦点图" /></a></div>

                <div id="img02"><a href="javascript:void(0)" target="_blank"><img src="/images/xuanchuan_02.jpg" alt="焦点图" /></a></div>

                <div id="img03"><a href="javascript:void(0)" target="_blank"><img src="/images/shijian_03.jpg" alt="焦点图" /></a></div>

           </div>

            <div class="dot">

                <a href="javascript:void(0)" target="_blank" num="img01" class="current"></a>

                <a href="javascript:void(0)" target="_blank" num="img02"></a>

                <a href="javascript:void(0)" target="_blank" num="img03"></a>

            </div>




         </div>




    </div>

CSS:


.flash{ width:100%; height:400px; border-bottom:1px solid #D9D5D5; margin:0px 0 10px;}

.flash .pic_box{width:100%;  height:400px; margin:0 auto; overflow:hidden; position:relative; background:url(/images/loading.gif) no-repeat center center;}

.flash .pic_box #img03{ background:#fc0; text-align:center;}

.flash .pic_box #img02{ background:#2D2D2D; text-align:center;}

.flash .pic_box #img01{ background:#C80C26;text-align:center;}

.flash .pic_box img{width:960px; height:400px;}

.flash .pic_box .dot{ position:absolute; bottom:15px; text-align:center; width:100%;}

.flash .pic_box .dot a{width:20px; height:15px; display:inline-block; background:url(/images/dot0114.png) no-repeat 2px -2px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/dot0114.png",sizingMethod="crop");}

.flash .pic_box .dot a:hover,.flash .pic_box .dot a.current{ background-position:-18px -2px;}



JS:


//焦点图：




function slide(n) {

    if (n >= $(".dot a").length) {

        n = 0;

    }

 

    $("#imgshow div").eq(n).fadeIn().siblings().fadeOut();

    $(".dot a").eq(n++).addClass("current").siblings().removeClass("current");

    t = setTimeout('slide(' + n + ')', 3000);

}




$(function () {

    slide(0);

    $(".dot a").hover(function () {

        clearTimeout(t);

        slide($(this).index());

    });







})