首页 > 代码库 > jquery图片轮播-插件
jquery图片轮播-插件
更新内容:
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{ width: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{ width: 98%; margin: 1% auto;}#slide_2{ width:816px; position:relative; margin:10px 10px; padding-right:16px;}.imglist_1{ width:816px; height:200px; overflow:hidden;}.imglist li{ float:left; width:120px; margin-left:16px; display:inline; position:relative;}.imglist li img{ width: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=http://www.mamicode.com/"#left" title="左移"></a> <div class="imglist_1"> <ul id="jc_picUl" class="imglist clear"> <li> <img alt="" src=http://www.mamicode.com/"../theme_3/img/CL/example/u910.png"> <p>检测封面</p> </li> <li> <img alt="" src=http://www.mamicode.com/"../theme_3/img/CL/example/u912.png"> <p>检测页1</p> </li> <li> <img alt="" src=http://www.mamicode.com/"../theme_3/img/CL/example/u916.jpg"> <p>检测页2</p> </li> <li> <img alt="" src=http://www.mamicode.com/"../theme_3/img/CL/example/u910.png"> <p>检测封面</p> </li> <li> <img alt="" src=http://www.mamicode.com/"../theme_3/img/CL/example/u912.png"> <p>检测页3</p> </li> <li> <img alt="" src=http://www.mamicode.com/"../theme_3/img/CL/example/u916.jpg"> <p>检测页4</p> </li> <li> <img alt="" src=http://www.mamicode.com/"../theme_3/img/CL/example/u910.png"> <p>检测页5</p> </li> <li> <img alt="" src=http://www.mamicode.com/"../theme_3/img/CL/example/u912.png"> <p>检测页6</p> </li> <li> <img alt="" src=http://www.mamicode.com/"../theme_3/img/CL/example/u916.jpg"> <p>检测页7</p> </li> </ul> </div> <a id="jc_right" class="abtn aright" href=http://www.mamicode.com/"#right" title="右移"></a> </div> </div> <script type="text/javascript" src=http://www.mamicode.com/"theme_3/js/jquery-1.8.3.min.js"></script> <script src=http://www.mamicode.com/"theme_3/js/addScrolljs.js"></script> <script> $(function(){ doAddscroll($("#slide_2"), 0, 6); }) </script> </body></html>
jquery图片轮播-插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。