正方形索引按钮jquery幻灯片焦点图效果

<section id="bannerbg">
        <ul class="bannerc">
            <li class="banner1" style="z-index: 1; opacity: 1;">
                <div class="banner">
                    <a href=""><img src="images/banner1.png"></a>
                    <a href="javascript：;" class="video_ban" id="video_ban"></a>
                </div>
            </li>
            <li class="banner2" style="z-index: 0; opacity: 0;">
                <div class="banner">
                    <a href=""><img src="images/jy.png"></a>
                </div>
            </li>
            <li class="banner3" style="z-index:0;opacity:0;">
                <div class="banner">
                    <a href=""><img src="images/cm.png"></a>
                </div>
            </li>
            <li class="banner4" style="z-index: 0; opacity: 0;">
                <div class="banner">
                    <a href=""><img src="images/zq.jpg"></a>
                </div>
            </li>
        </ul>
        <ul class="bannermenu">
            <li class="on"></li>
            <li class=""></li>
            <li class=""></li>
            <li class=""></li>
        </ul>
    </section>

引用jQuery库和插件

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.slide.js"></script>
<script type="text/javascript">
	$(function(){
		$("#bannerbg").Slide({//banner
			effect:"fade",
			speed:600,
			timer:5000
		});
	}); 
</script>