一款基于jQuery的全屏广告图片焦点图

之前为大家分享了很多jQuery焦点图插件。今天我们要介绍的这款jQuery全屏广告图片焦点图插件也非常不错，图片切换时有淡出淡出的动画效果，并且也相当流畅。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

 <div class="banner-box">

        <div class="bd">

            <ul>

                <li style="background: #F3E5D8;">

                    <div class="m-width">

                        <a href="javascript:void(0);">

                            <img src="images/img1.jpg" /></a>

                    </div>

                </li>

                <li style="background: #B01415">

                    <div class="m-width">

                        <a href="javascript:void(0);">

                            <img src="images/img2.jpg" /></a>

                    </div>

                </li>

                <li style="background: #C49803;">

                    <div class="m-width">

                        <a href="javascript:void(0);">

                            <img src="images/img3.jpg" /></a>

                    </div>

                </li>

                <li style="background: #FDFDF5">

                    <div class="m-width">

                        <a href="javascript:void(0);">

                            <img src="images/img4.jpg" /></a>

                    </div>

                </li>

            </ul>

        </div>

        <div class="banner-btn">

            <a class="prev" href="javascript:void(0);"></a><a class="next" href="javascript:void(0);">

            </a>

            <div class="hd">

                <ul>

                </ul>

            </div>

        </div>

    </div>

js代码：

 $(document).ready(function () {



            $(".prev,.next").hover(function () {

                $(this).stop(true, false).fadeTo("show", 0.9);

            }, function () {

                $(this).stop(true, false).fadeTo("show", 0.4);

            });



            $(".banner-box").slide({

                titCell: ".hd ul",

                mainCell: ".bd ul",

                effect: "fold",

                interTime: 3500,

                delayTime: 500,

                autoPlay: true,

                autoPage: true,

                trigger: "click"

            });



        });

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