三格图片轮播
2016-01-15 19:56
288 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0045)http://demo.jq22.com/jquery-hdp-141207213530/ --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>首页</title> <style> * { margin: 0; padding: 0; list-style-type: none; } a, img { border: 0; } .friend { height: 160px; margin: 0 auto; overflow: hidden; width: 480px; } .mr_frbox { height: 130px; padding: 24px 0px 0px; } .mr_frBtnL { cursor: pointer; display: inline; float: left; height: 46px; width: 32px; } .mr_frUl { float: left; height: 130px; width: 130px; margin-left: 5px; } .mr_frBtnR { float: right; cursor: pointer; width: 32px; } .next { border: 0px; height: 134px; background: transparent url(images/bbs_sprite.png) no-repeat -48px -1000px; } .next:hover { border: 0px; height: 134px; background: transparent url(images/bbs_sprite.png) no-repeat -48px -1138px; } .nextStop:hover { border: 0px; height: 134px; background: transparent url(images/bbs_sprite.png) no-repeat -48px -866px; } .nextStop { border: 0px; height: 134px; background: transparent url(images/bbs_sprite.png) no-repeat -48px -866px; } .prev { border: 0px; height: 134px; background: transparent url(images/bbs_sprite.png) no-repeat -1px -1000px; } .prev:hover { border: 0px; height: 134px; background: transparent url(images/bbs_sprite.png) no-repeat -1px -1138px; } .prevStop:hover { border: 0px; height: 134px; background: transparent url(images/bbs_sprite.png) no-repeat -1px -866px; } .prevStop { border: 0px; height: 134px; background: transparent url(images/bbs_sprite.png) no-repeat -1px -866px; } .tempWrap { overflow: hidden; position: relative; width: 380px } .mr_fu { width: 3600px; position: relative; overflow: hidden; padding: 0px; margin: 0px; left: -1200px; } </style> <!-- slide --> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.SuperSlide2.js"></script> </head> <body> <div class="friend"> <div class="mr_frbox"> <span class="mr_frBtnL prev"> </span> <div class="mr_frUl"> <div class="tempWrap"> <ul id="mr_fu"> <li style="float: left; width: 130px;"> <img style="width: 130px; height: 130px;" src="images/i2.jpg"> </li> <li style="float: left; width: 130px;"> <img style="width: 130px; height: 130px;" src="images/i3.jpg"> </li> <li style="float: left; width: 130px;"> <img style="width: 130px; height: 130px;" src="images/i4.jpg"> </li> <li style="float: left; width: 130px;"> <img style="width: 130px; height: 130px;" src="images/i.jpg"> </li> <li style="float: left; width: 130px;"> <img style="width: 130px; height: 130px;" src="images/i2.jpg"> </li> <li style="float: left; width: 130px;"> <img style="width: 130px; height: 130px;" src="images/i3.jpg"> </li> <li style="float: left; width: 130px;"> <img style="width: 130px; height: 130px;" src="images/i4.jpg"> </li> <li style="float: left; width: 130px;"> <img style="width: 130px; height: 130px;" src="images/i.jpg"> </li> </ul> </div> </div> <span class="mr_frBtnR next"> </span> </div> </div> <div class="friend"> <div class="mr_frbox"> <span class="mr_frBtnL prev"> </span> <div class="mr_frUl"> <div class="tempWrap"> <ul id="mr_fu"> <li style="float: left; width: 130px;"> <img style="width: 130px; height: 130px;" src="images/i2.jpg"> </li> <li style="float: left; width: 130px;"> <img style="width: 130px; height: 130px;" src="images/i3.jpg"> </li> </ul> </div> </div> <span class="mr_frBtnR next"> </span> </div> </div> <script type="text/javascript"> $(document).ready(function() { /* 图片滚动效果 */ $(".mr_frbox").slide({ titCell: "", mainCell: ".mr_frUl ul", autoPage: true, effect: "leftLoop", autoPlay: false, pnLoop:false, vis: 3 }); }); </script> </body> </html>
相关文章推荐
- ios 公司账号申请
- 网络发现打不开,每次点开启之后又变关闭
- 【SSH进阶之路】Hibernate映射——多对一单向关联映射(四)
- 多线程的基本概念
- git hook部署代码
- 数据结构优化连边
- Linux /UNIX 状态解释
- Java时间
- Codeforces round339 div2
- java推荐书籍及下载
- Android:Sqlitedatabase学习小结
- CodeForces 606A. Magic Spheres
- JVM运行数据区和常用的JVM工具的使用
- 北京地铁和广州地铁之感想
- 北京地铁和广州地铁之感想
- Linux 上搭建 git 的服务器
- Asp.Net页面的速度瓶颈有可能是正则处理造成的
- 蓝桥杯 出现次数最多的整数(注意判断条件就能过)
- 关于类的创建和调用
- vim缩进配置