IT技术互动交流平台

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

发布日期:2013-11-21 10:53:11

 

HTML结构
<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>

 

Tag标签: 正方形   jquery   幻灯片   焦点图  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规