更新内容:
1. 页面结构和css样式必定类似下边放置
2. 点击左右按钮，实现左右滑动。
3. 这一般用于多个图片轮播使用，简化并优化代码.
若因不同需求，均可自行将插件scrollimgplus.js进行相应的改造。
使用方法就不详述了, 请参见源码及相关注释:查看Demo
<!doctype html> <html> <head> <meta charset="utf-8"> <title>基本材料</title> <style> *{margin: 0; padding: 0;} body{ font-family: '微软雅黑'; font-size:12px; color: #393939; line-height: 1.5; } .clear {zoom:1;} .clear:after {content:""; display:block; height:0; visibility:visible; clear:both;} .abtn{ 11px; height:17px; } .aleft{ background:url(theme_3/img/CL/left.png) no-repeat 0 0; position:absolute; left:0; top:65px; } .aright{ background:url(theme_3/img/CL/right.png) no-repeat 0 0; position:absolute; right:0; top:65px; } .options{ 98%; margin: 1% auto; } #slide_2{ 816px; position:relative; margin:10px 10px; padding-right:16px; } .imglist_1{ 816px; height:200px; overflow:hidden; } .imglist li{ float:left; 120px; margin-left:16px; display:inline; position:relative; } .imglist li img{ 120px; height:159px; } .imglist li p{ font-size:12px; text-align:center; margin:0; line-height: 10px; } </style> </head> <body> <div class="options jc_pic clear" id="slide_2"> <a id="jc_left" class="abtn aleft" href="#left" title="左移"></a> <div class="imglist_1"> <ul id="jc_picUl" class="imglist clear"> <li> <img alt="" src="../theme_3/img/CL/example/u910.png"> <p>检测封面</p> </li> <li> <img alt="" src="../theme_3/img/CL/example/u912.png"> <p>检测页1</p> </li> <li> <img alt="" src="../theme_3/img/CL/example/u916.jpg"> <p>检测页2</p> </li> <li> <img alt="" src="../theme_3/img/CL/example/u910.png"> <p>检测封面</p> </li> <li> <img alt="" src="../theme_3/img/CL/example/u912.png"> <p>检测页3</p> </li> <li> <img alt="" src="../theme_3/img/CL/example/u916.jpg"> <p>检测页4</p> </li> <li> <img alt="" src="../theme_3/img/CL/example/u910.png"> <p>检测页5</p> </li> <li> <img alt="" src="../theme_3/img/CL/example/u912.png"> <p>检测页6</p> </li> <li> <img alt="" src="../theme_3/img/CL/example/u916.jpg"> <p>检测页7</p> </li> </ul> </div> <a id="jc_right" class="abtn aright" href="#right" title="右移"></a> </div> </div> <script type="text/javascript" src="theme_3/js/jquery-1.8.3.min.js"></script> <script src="theme_3/js/addScrolljs.js"></script> <script> $(function(){ doAddscroll($("#slide_2"), 0, 6); }) </script> </body> </html>