unslider 实现图片轮播
来源:互联网 发布:淘宝如何退货 编辑:程序博客网 时间:2024/04/30 08:26
1.请先下载所需css js文件
下载链接[http://unslider.com/](http://unslider.com/)jquery文件非此下载路径<!--若无需图片黑色标记部分功能无需引入unslider-dots.css样式文件--><link rel="stylesheet" type="text/css" href="res/slider/css/unslider-dots.css"><link rel="stylesheet" type="text/css" href="res/slider/css/unslider.css">若需实现图片黑色框标记部分单独自己添加样式代码.unslider { overflow: auto; margin: 0; padding: 0; /*Added*/ position: relative;}.unslider-nav{ position: absolute; width: 100%; bottom: 2%;}<script src="res/webapp/js/jquery-2.1.4.min.js"></script><script type="text/javascript" src="res/slider/jquery.event.move.js"></script><script type="text/javascript" src="res/slider/jquery.event.swipe.js"></script>jquery.event.move.js jquery.event.swipe.js若无需滑动支持可以无须引入<script type="text/javascript" src="res/slider/unslider-min.js"></script>
<div class="banner" id="home_banner"> <ul> <li data-slide="0"><img alt="" src="res/scmc/img/mobile/discovery/banner/1.png"></li> <li data-slide="1"><img alt="" src="res/scmc/img/mobile/discovery/banner/2.png"></li> <li data-slide="2"><img alt="" src="res/scmc/img/mobile/discovery/banner/3.png"></li> </ul></div>
$(document).ready(function() { var slider = $('.banner').unslider({ speed : 500, delay : 4000, nav : true,//是否启动导航图标 dots: true,//是否出先圆点点 arrows : false, autoplay : true //自动轮播 }); });
0 0
- unslider 实现图片轮播
- 使用unslider图片轮播
- unslider插件制作图片轮播
- jquery 图片轮播插件unslider
- unslider.js轮播
- unslider图片轮播插件初体验(一)
- unslider图片轮播插件初体验(二)
- 使用unslider.js图片轮播插件创建一个能轮播24节气的网页
- 实现图片轮播
- 实现图片轮播
- 图片轮播实现
- jQuery 实现图片轮播
- banner实现图片轮播
- js实现图片轮播
- jquery 实现图片轮播
- ViewPager实现图片轮播
- javaScript实现图片轮播
- Android 实现图片轮播
- java解析由String类型拼接的XML文件
- android定制activity标题栏
- Android读写文件正确实行方法介绍
- LSH 位置敏感哈希算法
- Select into结构使用
- unslider 实现图片轮播
- JDBC应用程序的基本步骤
- Swing Worker应用举例
- Dalvik虚拟机的运行过程分析
- upgrade_tool ef失败
- 关于Request
- Flex框架-甘特图开发
- 渗透之突破ssl嗅探
- NOIP提高组 鼎纹