jquery左右滚动焦点图banner图片,鼠标经过显示上下页
适合宽和高都比较大的页面使用

 

代码如下:

<div class=”bannerbox”>
<div id=”focus”>
<ul>
<li><a href=”http://www.freejs.net/” target=”_blank”>
<img” width=100% src=”../dandong.png” alt=”” /></a></li>
<li><a href=”http://www.freejs.net/” target=”_blank”>
<img” width=100% src=”../mohe.png” alt=”” /></a></li>
<li><a href=”http://www.freejs.net/” target=”_blank”>
<img” width=100% src=”../changbaishan.png” alt=”” /></a></li>
<li><a href=”http://www.freejs.net/” target=”_blank”>
<img” width=100% src=”../erlianhaote.png” alt=”” /></a></li>
</ul>
</div>
</div>

代码如下:

@charset “utf-8”;
img { border: 0px; }
.bannerbox { width: 320px; height: 150px; overflow: hidden; margin: 0px auto; }
#focus { width: 320px; height: 150px; clear: both; overflow: hidden; position: relative; float: left; }
#focus ul { width: 320px; height: 150px; float: left; position: absolute; clear: both; padding: 0px; margin: 0px; }
#focus ul li { float: left; width: 320px; height: 150px; overflow: hidden; position: relative; padding: 0px; margin: 0px; }
#focus .preNext { width: 250px; height: 150px; position: absolute; top: 0px; cursor: pointer; }
#focus .pre { left: 0; background: url(../images/sprite.png) no-repeat left center; }
#focus .next { rightright: 0; background: url(../images/sprite1.png) no-repeat rightright center; }

js文件

SyntaxHighlighter.highlight();