首页 > 特效插件 > 滚动轮播 >  基于foucsbox图片滚动正文

基于foucsbox图片滚动

特效介绍
基于foucsbox图片滚动

从php100弄下来的一个图片滚动效果,还不错,是基于foucsbox插件。兼容性没有测试。
使用方法
1、在头部引入下面的文件
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/foucsbox.css"/>
<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/foucsbox.js"></script>
您可以将css文件合并,如果您觉得引入文件太多的话

2、在您的图片滚动区域引入下面的html代码:
<div class="left">
    <div class="pic">
        <div id="foucsBox">
            <ul class="imgCon">
            <!--展示图片开始-->
                <li><a href="#" target="_blank">
                <img width="420" height="240" src="images/1.png" /></a>
                <div class="imgTitle"><a href="#" target="_blank">27种迹象你该考虑辞掉程序员的工作</a></div>
                <div class="showPage"></div>
                </li>
                <li><a href="#" target="_blank">
                <img width="420" height="240" src="images/2.jpg" /></a>
                <div class="imgTitle"><a href="#" target="_blank">VC的陷阱,看哪些条款会威胁到创业者的利益</a></div>
                <div class="showPage"></div>
                </li>
                <li><a href="#" target="_blank">
                <img width="420" height="240" src="images/3.jpg" /></a>
                <div class="imgTitle"><a href="#" target="_blank">小米360同日竞技:智能手机血战再起</a></div>
                <div class="showPage"></div>
                </li>
                <li><a href="#" target="_blank">
                <img width="420" height="240" src="images/4.png" /></a>
                <div class="imgTitle"><a href="http://www.5imoban.net" target="_blank">网页模板</a></div>
                <div class="showPage"></div>
                </li>
            <!--展示图片结束-->
            </ul>
            <div class="foucs"></div>
            <div class="rBtn foucsButton"><span></span></div>
            <div class="lBtn foucsButton"><span></span></div>
        </div>
    </div>
</div>