js、jquery图片动画，图片动态切换

<style type="text/css">
#banner
        {
            padding: 5px;
            position: relative;
            width: 968px;
            height: 293px; /*border: 1px solid #666;*/
            overflow: hidden;
            font-size: 16px;
        }
        #banner_list img
        {
            border: 0px;
        }
        #banner_bg
        {
            margin-bottom: 5px;
            position: absolute;
            bottom: 0;
            background-color: #000;
            height: 30px;
            filter: Alpha(Opacity=30);
            opacity: 0.3;
            z-index: 1000;
            cursor: pointer;
            width: 968px;
        }
        #banner_info
        {
            position: absolute;
            bottom: 4px;
            left: 0px;
            height: 22px;
            color: #fff;
            z-index: 1001;
            cursor: pointer;
        }
        #banner_text
        {
            position: absolute;
            width: 120px;
            z-index: 1002;
            right: 3px;
            bottom: 3px;
        }
        #banner ul
        {
            position: absolute;
            list-style-type: none;
            filter: Alpha(Opacity=80);
            opacity: 0.8;
            z-index: 1002;
            margin: 0;
            padding: 0;
            bottom: 10px;
            right: 5px;
            height: 20px;
        }
        #banner ul li
        {
            padding: 0 8px;
            line-height: 18px;
            float: left;
            display: block;
            color: #FFF;
            border: #e5eaff 1px solid;
            background-color: #6f4f67;
            cursor: pointer;
            margin: 0;
            font-size: 16px;
        }
        #banner_list a
        {
            /* position: absolute;*/
            width: 968px;
            height: 293px;
            margin: 0px;
            padding: 0px;
        }
        #banner_list
        {
            margin: 0px;
            padding: 0px;
            width: 968px;
            height: 293px;
            border: #e7e7e7 1px solid;
        }
</style>

 

<script type="text/javascript">
        var t = n = 0, count;
        $(function () {
            count = $("#banner_list a").length;
            $("#banner_list a:not(:first-child)").hide();
            $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
            $("#banner_info").click(function () { window.open($("#banner_list a:first-child").attr('href'), "_blank") });
            $("#banner li").click(function () {
                var i = $(this).text() - 1; //获取Li元素内的值，即1，2，3，4 
                n = i;
                if (i >= count) return;
                $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
                $("#banner_info").unbind().click(function () { window.open($("#banner_list a").eq(i).attr('href'), "_blank") })
                $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
                $(this).css({ "background": "#be2424", 'color': '#000' }).siblings().css({ "background": "#6f4f67", 'color': '#fff' });
            });
            t = setInterval("showAuto()", 4000);
            $("#banner").hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 4000); });//4秒钟切换一张图片});
        function showAuto() {
            n = n >= (count - 1) ? 0 : ++n;
            $("#banner li").eq(n).trigger('click');
        } 
    </script>

<div id="banner">
                                <div id="banner_bg">
                                </div>
                                <!--标题背景-->
                                <div id="banner_info">
                                </div>
                                <!--标题-->
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                    <li>3</li>
                                    <li>4</li>
                                </ul>
                                <div id="banner_list">
                                    <a href='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgoneURL"]:""%>' target="_blank">
                                        <img src='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgone"]:"Images/Singapore.jpg"%>'
                                            title="" alt="" width="968px" height="293px" border="0" /></a> <a href='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgtowURL"]:""%>'
                                                target="_blank">
                                                <img src='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgtow"]:"Images/Malaysia.jpg"%>'
                                                    title="" alt="" width="968px" height="293px" border="0" /></a> <a href='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgthreeURL"]:""%>'
                                                        target="_blank">
                                                        <img src='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgthree"]:"Images/HongKong.jpg"%>'
                                                            title="" alt="" width="968px" height="293px" border="0" /></a>
                                    <a href='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgfourURL"]:""%>' target="_blank">
                                        <img src='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgfour"]:"Images/flash4.jpg"%>'
                                            title="" alt="" width="968px" height="293px" border="0" /></a>
                                </div>
                            </div>