横向图片轮播(如果一个项目里面只需用这一次,可以用这个插件,多次则不建议使用)
2013-05-16 12:01
615 查看
HTML
<divclass="bx_wrap"> <divclass="bx_container"> <ulid="demo1"> <li><imgalt="#"width="140"height="94"src="img/s1.jpg"></li> <!--更多图片--> </ul> </div> </div>
HTML由一组图片构成的无序列表ul,给ul一个id属性用于JS调用,另外ul的父级div.bx_container和div.bx_wrap是必需的。此外记得在head间载入jquery库和滚动所需的js插件: <scripttype="text/javascript"src="js/jquery.js"></script> <scripttype="text/javascript"src="js/bxCarousel.js"></script> CSS
.bx_wrap{margin-left:10px;margin-top:10px} .bx_wrapulimg{border:2pxsolid#ddd;} .bx_wrapulli{text-align:center} .bx_wrapullia:hover{text-decoration:none;color:#f30} .bx_wrapa.prev{width:20px;height:24px;line-height:24px;outline-style:none;outline-width:0; position:absolute;top:45px;left:-2px;text-indent:-999em;background:url(img/arr_left.gif) no-repeat;} .bx_wrapa.next{width:20px;height:24px;line-height:24px;left:626px;position:absolute; top:45px;text-indent:-999em;background:url(img/arr_right.gif)no-repeat;} 如果要使用方向按钮导航,则需要设置.bx_wrapa.prev和.bx_wrapa.next的样式。
jQuery
$("#demo1").bxCarousel({ display_num:4, move:1, auto:true, controls:false, margin:10 }); bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4。 display_num:展示图片的数量,默认为4。 speed:图片滚动速度,默认为500毫秒。 margin:图片间的间距,默认为0。 auto:是否自动滚动,默认为false。 auto_interval:当设为自动滚动时,每次滚动的时间间隔(毫秒),默认为2000毫秒即2秒。 auto_dir:自动滚动的方向,默认为next,你可以试下prev。 next_image:'../images/next.jpg',向右滚方向按钮图片,可以用CSS设置。 prev_image:'../images/prev.jpg',向左滚方向按钮图片,可以用CSS设置。 auto_hover:滚动时,鼠标滑上图片时是否停止滚动,默认为false。 controls:是否显示左右滚动按钮图片,默认为true
参考地址:
DEMO地址:
相关文章推荐
- PC端、移动端都可以用的图片轮播(左右滑动切换)插件及使用
- 又一个jquery轮播效果,焦点图,带数字显示序号,这个可以添加对应标题在图片上,支持主流浏览器
- 又一个jquery轮播效果,焦点图,带数字显示序号,这个可以添加对应标题在图片上,支持主流浏览器
- 又一个jquery轮播效果,焦点图,带数字显示序号,这个可以添加对应标题在图片上,支持主流浏览器
- 利用运行时,给UIImageView写一个分类,交换里面的setImage的方法,可以重绘图片,提高内存的利用率(要是没有重绘图片,直接使用系统提供的setImag就会造成占用大量的内存问题)
- 一个袋子里面有n个球,每个球上面都有一个号码(拥有相同号码的球是无区别的)。如果一个袋子是幸运的当且仅当所有球的号码的和大于所有球的号码的积。 例如:如果袋子里面的球的号码是{1, 1, 2, 3},这个袋子就是幸运的,因为1 + 1 + 2 + 3 > 1 * 1 * 2 * 3 你可以适当从袋子里移除一些球(可以移除0个,但是别移除完),要使移除后的袋子是幸运的。现在让你编程计算一下你可以获得
- 又一个jquery轮播效果,焦点图,带数字显示序号,这个可以添加对应标题在图片上,支持主流浏览器
- Adapter 如果客户需要使用某个类的服务,而这项服务是这个类用一个不同的接口提供的,那么,可以使用适配器模式为客户提供一个期望的接口
- 使用unslider.js图片轮播插件创建一个能轮播24节气的网页
- 给出一个2D板和一个单词,找出这个单词是否存在于网格中。 该单词可以由顺序相邻单元的字母构成,其中“相邻”单元是水平或垂直相邻的单元。 相同的字母单元可能不会被多次使用。
- Mouse without Borders是微软的一个软件实验项目,这款软件可让鼠标自由在局域网中的多台电脑间移动,键盘输入实现无缝切换,还可以直接用鼠标相互拖拽文件。 如果经常需要同时使用两台以
- 在一个大型B2C项目中,如果存在大量重复查询,可以通过使用ThreadLocal来解决
- facade 提供一个接口,通过这个接口,可以使一个子系统更容易使用。
- 例题:把一个超市购物的题做成函数。这个题做成函数没有必要,但可以了解输入参数,输出参数,返回值,函数体,还有结构体,ArryList集合,for循环算结果,以及集合里 .count的使用
- Factory 定义一个接口,客户可以使用这个接口创建一个对象.同时,我们还可以控制对那个类进行实例化
- 开平方 如果没有计算器,我们如何求2的平方根? 可以先猜测一个数,比如1.5,然后用2除以这个数字。
- 实现一个3D图片轮播插件 —— 更新版
- 自制消消乐 使用学习vue.js 和 es6 class语法 就写了一个这个游戏 源码 可以去 github 上下载
- 使用Eclipse无插件搭建一个简单的Hibernate项目
- android 使用 websocket 进行长链接的一个简单的 demo,可以用来收发消息或别的操作,里面用到了 autobahn 的 jar 包