jQuery响应式焦点图

查看演示立即下载

插件描述：jQuery响应式焦点图带进度条

首先，引入

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

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery全屏切换
下一个特效： jquery新闻滚动插件多条分类响应式标题新闻滚动效果代码