仿淘宝的图片切换效果

第一种方法：下面没有连接

<div id="oTransContainer" style="filter: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); width: 500px; height: 250px; margin: 0px">
    <script>
        var NowFrame = 1;
        var MaxFrame = 5;//图片张数
        var bStart = 0;
        function getNavigatorType()
        {
            if (navigator.appName == "Microsoft Internet Explorer") return 1; 
            else if (navigator.appName == "Netscape") return 2; 
            else return 0;
        }
        function fnToggle()
        {
            var next = NowFrame + 1;
            if(next == MaxFrame+1)
            {
                NowFrame = MaxFrame;
                next = 1;
            }
            if(bStart == 0)
            {
                bStart = 1;
                setTimeout('fnToggle()', 3000);
                return;
            }
            else
            {
             
                if (getNavigatorType() == 1)
                {
                    oTransContainer.filters[0].Apply();
                    document.images['oDIV'+next].style.display = "block";
                    document.images['oDIV'+NowFrame].style.display = "none";
                    oTransContainer.filters[0].Play(duration=2);
                }
                else
                {
                    document.images['oDIV'+next].style.display = "block";
                    document.images['oDIV'+NowFrame].style.display = "none";
                }
                if(NowFrame == MaxFrame)
                {
                    NowFrame = 1;
                }
                else
                {
                    NowFrame++;
                }
            }
            setTimeout('fnToggle()', 6000);
        }
        fnToggle();
    </script>

    <a href="#"><img id="oDIV1" style="display: block;" src="images/1.jpg" width="500px" height="250px"></a>
    <a href="#"><img id="oDIV2" style="display: none" src="images/2.jpg" width="500px" height="250px"></a>
    <a href="#"><img id="oDIV3" style="display: none" src="images/4.jpg" width="500px" height="250px"></a>
    <a href="#"><img id="Img1" style="display: none" src="images/5.jpg" width="500px" height="250px"></a>
    <a href="#"><img id="Img2" style="display: none" src="images/6.jpg" width="500px" height="250px"></a>
</div>

第二种方法：下面加连接

<LINK href="http://assets.taobaocdn.com/ark/css/mall_common_v2.css?t=20080622.css" type=text/css rel=stylesheet>

<LINK href="http://assets.taobaocdn.com/ark/css/mall_default_v2.css?t=20080725.css" type=text/css rel=stylesheet>

<script type="text/javascript" src="http://www.taobao.com/home/js/tbra/yui-base.js?t=20080603.js"></script>
<script type="text/javascript" src="http://www.taobao.com/home/js/tbra/tbra.js?t=20080603.js"></script>

 

<div class=silbo>
    <div class=silbo-slide>
    <div id=SlidePlayer>
    <ul class=Slides>
        <li title="08秋季靓装新品隆重上市！">
        <!--AdForward Begin:-->
        <div><a href="AssortGoodList.aspx?AssortNo=1005"><img src="images/1.jpg" width="500" height="250" border="0"></a></div>
        <!--AdForward End-->
        </li>
        <li title="08新款滑盖手机正在促销中！">
        <!--AdForward Begin:-->
        <div><a href="AssortGoodList.aspx?AssortNo=1003"><img src="images/2.jpg" width="500" height="250" border="0"></a><</div>
        <!--AdForward End-->
        </li>
        <li title="08新款手机热卖！">
        <!--AdForward Begin:-->
        <div><a href="AssortGoodList.aspx?AssortNo=1003"><img src="images/4.jpg" width="500" height="250" border="0"></a></div>
        <!--AdForward End--><!--outerAd start-->
        </li>
        <li title="电脑超级通，软硬件故障维修专家！">
        <!--AdForward Begin:-->
        <div><a href="AssortGoodList.aspx?AssortNo=1004"><img src="images/5.jpg" width="500" height="250" border="0"></a></div>
        <!--AdForward End--><!--outerAd end-->
        </li>
        <li title="您的私人酒水管家；两瓶起送，超值保真！">
        <!--AdForward Begin:-->
        <div><a href="AssortGoodList.aspx?AssortNo=1006"><img src="images/6.jpg" width="500" height="250" border="0"></a></div>
        <!--AdForward End-->
        </li>
        <li title="在线购票，票到付款，安全又快捷！">
        <!--AdForward Begin:-->
        <div><a href="Ticket/skcx.aspx"><img src="images/piao500_250.jpg" width="500" height="250" border="0"></a></div>
        <!--AdForward End-->
        </li>
        <li title="直呼品牌找到您；超词、超链、多网合一！">
        <!--AdForward Begin:-->
        <div><a href="Fame/Fame.aspx"><img src="images/phone500_250.jpg" width="500" height="250" border="0"></a></div>
        <!--AdForward End-->
        </li>
    </ul>
    </div>
    <script type=text/javascript>
    TB.widget.SimpleSlide.decorate('SlidePlayer', {eventType:'mouse', effect:'fade', onInit:function(){
        var lis = $D.getElementsByClassName('Slides', 'ul', $D.get('SlidePlayer'))[0].getElementsByTagName('li'),
            titles = [], hrefs = [];
        for (var i=0; i<lis.length; i++) {
            var el, innerEl;
            el = document.createElement('div');
            el.className = 'SlideTitle';
            el.innerHTML = lis[i].getAttribute('title')+'<b></b>';
            lis[i].appendChild(el);
        }
    }});
    </script>
    </div>
</div>