所属分类:网页特效-焦点图/幻灯片
插件特点:
多个参数定制,满足不同项目需求。
支持移动端触控滑动。
支持图文混排,支持各种html元素。
响应式自适应屏幕尺寸。
同一页面支持多个滑动切换。
轻量级的,压缩版不到4KB。
支持所有现代浏览器,支持ie8+。
安装方法:
载入jQuery库文件、JS、CSS文件
<link type="text/css" rel="stylesheet" href="css/hwslider.css" />
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js">script>
<script type="text/javascript" src="js/jquery.hwSlider.js">script>
HTML部分:
<div class="hwslider">
<ul>
<li><img src="images/s1.jpg" alt="">li>
<li><img src="images/s2.jpg" alt="">li>
<li>hwSlider.jsli>
ul>
div>
初始化、配置部分:
$(function() {
$(".hwslider").hwSlider();
})
插件其他参数列表:
参数 | 描述 | 默认值 |
height | 滑块的初始高度,数字,宽度和高度用于确保自适应等比例缩放滑块大小。 | 320 |
start | 初始滑动位置,从第几个开始滑动,数字 | 1 |
speed | 滑动速度,单位ms,数字 | 600 |
interval | 滑块滑动间隔时间,单位ms,数字 | 3000 |
autoPlay | 是否自动滑动,布尔型true/false | false |
dotShow | 是否显示圆点导航,布尔型true/false | true |
arrShow | 是否显示左右方向箭头导航,布尔型true/false | true |
touch | 是否支持触摸滑动,布尔型true/false | true |
afterSlider | 回调函数,滑动一个滑块后,调用该函数 |
还有一款是基于zepto的:http://www.sucainiu.com/jquery-hwslider