A jQuery-based full-screen advertising image focus chart, jquery full-screen

A jQuery-based full-screen advertising image focus chart, jquery full-screen

I have previously shared many jQuery focus graph plug-ins. The jQuery full-screen ad image focus graph plug-in we will introduce today is also very good, and the image switching has a fade-out animation effect, and it is also quite smooth. As follows:

Download Online Preview source code

Implementation code.

Html code:

 <div class="banner-box">        <div class="bd">            <ul>                <li style="background: #F3E5D8;">                    <div class="m-width">                        <a href="javascript:void(0);">                            </a>                    </div>                </li>                <li style="background: #B01415">                    <div class="m-width">                        <a href="javascript:void(0);">                            </a>                    </div>                </li>                <li style="background: #C49803;">                    <div class="m-width">                        <a href="javascript:void(0);">                            </a>                    </div>                </li>                <li style="background: #FDFDF5">                    <div class="m-width">                        <a href="javascript:void(0);">                            </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 Code:

 $(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