素材牛VIP会员

基于jQuery的响应式内容、图片滑动插件jquery.hwSlider.js

 所属分类:网页特效-焦点图/幻灯片

 浏览:2346次  评论:0次  更新时间:2016-08-03
牛币素材VIP可免积分下载
基于jQuery的响应式内容、图片滑动插件jquery.hwSlider.js兼容IE8
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:多个参数定制,满足不同项目需求。 支持移动端触控滑动。 支持图文混排,支持各种html元素。 响应式自适应屏幕尺寸。 同一页面支持多个滑动切换。

详细介绍

插件特点:

多个参数定制,满足不同项目需求。

支持移动端触控滑动。

支持图文混排,支持各种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/falsefalse
dotShow是否显示圆点导航,布尔型true/falsetrue
arrShow是否显示左右方向箭头导航,布尔型true/falsetrue
touch是否支持触摸滑动,布尔型true/falsetrue
afterSlider回调函数,滑动一个滑块后,调用该函数

还有一款是基于zepto的:http://www.sucainiu.com/jquery-hwslider

相关素材 - 焦点图/幻灯片

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)