特效介绍

从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="https://5.jimth.com/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="https://5.jimth.com" 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>
