一款基于jQuery的超酷动画幻灯片

今天给大家带来一款仿步步高vivo手机网站的一款首页焦点幻灯展示特效，带有超酷炫的动画特效，动态效果丝毫不逊色于flash动画，具有很强的视觉冲击力，推荐下载学习！

提示：兼容360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗，不支持IE8及以下浏览器。效果图如下：

在线预览   源码下载

实现的代码。

需要引的用js在实例代码中已提供。下面是html代码部分：

<div id="vivo-wrap">

        <div id="vivo-contain">

            <div class="focus-gallery">

                <ul class="cl">

                    <li class="high-imageSearch3"><a href="http://www.w2bc.com/">

                        <div class="high-box">

                            <div class="figure">

                                <div class="screen">

                                    <img src="data:images/h-imagesearch3-sc1.jpg" width="1310" height="299" /></div>

                                <div class="mobile">

                                    <img src="data:images/h-imagesearch3-mob.png" width="700" height="380" /></div>

                            </div>

                            <div class="high-title">

                                <h2>

                                    <img src="data:images/h-imagesearch3-logo.png" width="830" height="390" /></h2>

                            </div>

                        </div>

                    </a></li>

                    <li class="high-x5"><a href="http://www.w2bc.com/">

                        <div class="high-box">

                            <div class="figure">

                                <b class="mob1">

                                    <img src="data:images/h-x5-f1.png" alt="X5" width="700" height="680" /></b> <b class="mob2">

                                        <img src="data:images/h-x5-f2.png" alt="X5" width="490" height="480" /></b> <b class="mob3">

                                            <img src="data:images/h-x5-f3.png" alt="X5" width="510" height="415" /></b>

                                <b class="mob4">

                                    <img src="data:images/h-x5-f4.png" alt="X5" width="710" height="680" /></b>

                            </div>

                            <div class="high-title">

                                <h2>

                                    <img src="data:images/h-x5-t1.png" width="366" height="107" /></h2>

                                <h3>

                                    <img src="data:images/h-x5-t2.png" width="366" height="69" /></h3>

                                <h4>

                                    <img src="data:images/h-x5-t3.png" width="366" height="127" /></h4>

                            </div>

                        </div>

                    </a></li>

                    <li class="high-x3v"><a href="http://www.w2bc.com/">

                        <div class="high-box">

                            <div class="figure">

                                <img src="data:images/h-x3v-figure.png" width="532" height="566" /></div>

                            <div class="high-title">

                                <h2>

                                    <img src="data:images/h-x3v-title1.png" width="459" height="95" /></h2>

                                <h3>

                                    <img src="data:images/h-x3v-title2.png" width="459" height="95" /></h3>

                            </div>

                        </div>

                    </a></li>

                    <li class="high-enjoyevent"><a href="http://www.w2bc.com/">

                        <div class="high-box">

                            <div class="e-circle">

                                <em class="e1"></em><em class="e2"></em><em class="e3"></em>

                            </div>

                            <div class="high-title">

                                <em class="t1">

                                    <img src="data:images/h-enjoy-t1.png" width="338" height="148" /></em> <em class="t2">

                                        <img src="data:images/h-enjoy-t3.png" width="464" height="120" /></em>

                                <h2>

                                    <img src="data:images/h-enjoy-t4.png" width="756" height="447" /></h2>

                                <em class="t3">

                                    <img src="data:images/h-enjoy-t2.png" width="74" height="58" /></em>

                            </div>

                            <div class="figure">

                                <em class="m1">

                                    <img src="data:images/h-enjoy-c4.png" width="120" height="160" /></em>

                                <div class="m2">

                                    <em class="m2-1">

                                        <img src="data:images/h-enjoy-c2.png" width="180" height="110" /></em> <em class="m2-2">

                                            <img src="data:images/h-enjoy-c1.png" width="240" height="430" /></em>

                                </div>

                                <em class="m3">

                                    <img src="data:images/h-enjoy-c3.png" width="486" height="482" /></em>

                            </div>

                        </div>

                    </a></li>

                    <li class="high-xshotnew"><a href="http://www.w2bc.com/">

                        <div class="high-box">

                            <em class="mask">

                                <img src="data:images/h-xshot-mask.png" width="560" height="426" /></em>

                            <div class="high-title">

                                <h2>

                                    <img src="data:images/h-xshot-t1.png" width="446" height="146" /></h2>

                                <h3>

                                    <img src="data:images/h-xshot-t2.png" width="454" height="95" /></h3>

                            </div>

                        </div>

                    </a></li>

                </ul>

                <div class="switch-high">

                </div>

            </div>

        </div>

    </div>

via:http://www.w2bc.com/Article/14395