特效介绍
从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>