编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

正方形索引按钮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  幻灯片  焦点图  
  • 专题推荐