jquery的bxslider轮播图插件事列源码下载
下面是jquery的bxslider插件例子,复制代码到编译器就可以看到效果,如果图片没有显示出来可以换成自己的图片,如js加载慢,可下载到本地后运行。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>bxslider轮播图_淘拜网</title> <style> .banner:hover .bx-prev { display:block;} .banner:hover .bx-next{ display:block;} .bx-pager{ position:absolute; left:0; margin-top:-20px; text-align:center; right:0;} .bx-pager-item{ display:inline-block;} .bx-pager-item a{ display:inline-block; height:15px; width:15px; background-color:rgba(20,196,199,1.00); margin-right:20px; text-indent:-9999em; border-radius:15px;} .bx-pager-item a.active,.bx-pager-item a:hover{ background-color:rgba(252,47,0,1.00);} .bx-caption{ position:absolute; left:0; right:0; bottom:45px; height:35px; line-height:35px; background-color:rgba(0,0,0,.3); color:#fff; font-size:16px; padding-left:2em;} </style> <script type="text/javascript" src="http://www.taobye.com/pc/download/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://www.taobye.com/pc/download/jquery.bxslider.js"></script> </head> <body> <div class="banner"> <ul id="bannerul"> <li><a href="/" ><img id="bannerimg2" src="http://www.taobye.com/attachFiles/image/20160329/20160329144032_620.jpg" height="274" width="100%" alt="淘拜网"></a></li> <li><a href="/" ><img id="bannerimg2" src="http://www.taobye.com/attachFiles/image/20160329/20160329144032_620.jpg" height="274" width="100%" alt="淘拜网"></a></li> <li><a href="/" ><img id="bannerimg2" src="http://www.taobye.com/attachFiles/image/20160329/20160329144032_620.jpg" height="274" width="100%" alt="淘拜网"></a></li> </ul> </div> </body> <script> $(function(){ $(’#bannerul’).bxSlider({ auto:true,//自动播放 pause: 2000,//停留的时间 speed: 500,//动画的时间 mode: ’horizontal’,//动画的方向:vertical(垂直滚动) horizontal(水平滚动) captions: false,//标题 autoHover:true,//鼠标放上面停止 }); }); </script> </html>
正在加载评论...
栏目列表
推荐阅读
- js控制滚动条到最底端(置底)和最顶端(置顶)
- js将图片转化为二进制流
- bootstrap导航菜单,手机和PC端自适应
- javascript/jquery/js获取地址栏url传递的参数值的方法
- js辨别访问浏览器判断是手机,android,微信,pc还是ios系统
- Html5 canvas 简单画布画板例子源码
- IE浏览器下Ajax发送Post请求时提交中文乱码
- localStorage与sessionStorage封装可设置过期时间的缓存
- js 中获取当前系统时间
- 使用JS获取当前页面的URL,端口,协议,IP(网址信息)
- jquery.lightTreeview.js树形菜单插件例子
- js获取当前域名
- XMLHttpRequest封装同步请求的例子
- ztree加载树形菜单控件事列
- JS获取屏幕分辨率,可见区域,可用工作区等大小
- js利用Date.prototype.Format对时间格式化处理,yyyy-MM-dd HH:mm:ss:SS
- jquery.js和jquery-1.4.2.min.js的区别
- jquery追加元素的几种方法append(),prepend(),after(),before(),insertAfter(),insertBefore()
- 引入script地址时,并携带参数,js获取script标签上的属性数据值
- javascript怎么禁用浏览器后退按钮