特效描述:jQuery 图片全屏滚动 自适应分辨率宽度 焦点图片滚动。jquery图片全屏滚动,听过左右按钮控制焦点图片滚动,且自适应浏览器分辨率宽度的焦点图片滚动。
代码结构
1. 引入JS
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="js/jquery.foucs.js" type="text/javascript"></script>
2. HTML代码
<div class="focusbox"> <div id="fullbanner"> <div class="wrappic"> <ul> <li class="plan"><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="950" height="400" src="images/1.jpg" alt="站长素材" /></a></li> <li class="plan"><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="950" height="400" src="images/2.jpg" alt="站长素材" /></a></li> <li class="plan"><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="950" height="400" src="images/3.jpg" alt="站长素材" /></a></li> <li class="plan"><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="950" height="400" src="images/4.jpg" alt="站长素材" /></a></li> </ul> </div> <div class="helper"> <div class="mask-left"></div> <div class="mask-right"></div> <a href="javascript:void();" class="prev arrow-left"></a> <a href="javascript:void();" class="next arrow-right"></a> </div> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $.foucs({ direction: 'right' }); }); </script>