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

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！