jQuery响应式焦点图

 查看演示  website  立即下载

首先，引入

<link href="css/slider/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
<link href="css/slider/style.css" rel="stylesheet" type="text/css"/>
<link href="css/slider/blue.css" rel="stylesheet" type="text/css" id="style_color"/>

在主体中引入滑块

<!-- 开始页面容器 -->  
    <div class="page-container">
        <!-- 开始运行滑块 -->    
        <div class="fullwidthbanner-container slider-main">
            <div class="fullwidthabnner">
                <ul id="revolutionul" style="display:none;">            
                        <li data-transition="fade" data-slotamount="8" data-masterspeed="300" data-delay="6400" >
	                        <a href="#"> <img src="images/slider/bg6.jpg" alt=""></a>   
                        </li>
                        <li data-transition="fade" data-slotamount="7" data-masterspeed="300" data-delay="6400" >
                        	<a href="#"><img src="images/slider/bg7.jpg" alt=""></a>
                        </li>
                        <li data-transition="fade" data-slotamount="8" data-masterspeed="300" data-delay="6400" >
                           	<a href="#"><img src="images/slider/bg8.jpg" alt=""></a>
                        </li>  
                        <li data-transition="fade" data-slotamount="8" data-masterspeed="300" data-delay="6400" >
                            <a href="#"><img src="images/slider/bg9.jpg" alt=""></a>                        
                        </li>
                </ul>
                <div class="tp-bannertimer tp-bottom"></div><!--进度条-->
            </div>
        </div>
        <!-- END  运行滑块 -->
    </div>
    <!-- END 页面内容 -->

最后，在底部引入

<!-- 从核心插件（所有页的要求） -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/slider/bootstrap.min.js"></script>      
 
    <!-- 开始页级（仅对当前页面所需的JavaScript代码）-->
    <script type="text/javascript" src="js/slider/jquery.themepunch.plugins.min.js"></script>
    <script type="text/javascript" src="js/slider/jquery.themepunch.revolution.min.js"></script> 
    <script type="text/javascript" src="js/slider/jquery.bxslider.min.js"></script>
    <script src="js/slider/app.js"></script>
    <script src="js/slider/index.js"></script> 
    <script type="text/javascript">
        jQuery(document).ready(function() {
            App.init();    
            App.initBxSlider();
            Index.initRevolutionSlider();                    
        });
    </script>

PREVIOUS:
NEXT:
jquery新闻滚动插件多条分类响应式标题新闻滚动效果代码
jquery全屏切换