一款基于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