内容滑动切换效果jquery.hwSlide.js插件封装


Posted in Javascript onJuly 07, 2016

经过前两部分的讲解,我们大概知道内容滑动切换的基本开发思路和技巧,现在我们在第三部分将前面两部分的代码进行优化,封装成一个jQuery插件:jquery.hwSlide.js。开发者可以轻松创建各种图片轮播效果、焦点图效果、图文混排滑动效果。

内容滑动切换效果jquery.hwSlide.js插件封装

下载源码

hwSlider具有以下特性:

多个参数定制,满足不同项目需求。
支持移动端触控滑动。
支持图文混排,支持各种html元素。
响应式自适应屏幕尺寸。
同一页面支持多个滑动切换。
轻量级的,压缩版不到4KB。
支持所有现代浏览器,支持ie8+。

HTML
首先在页面head部位载入hwSlider所需的基本css样式文件,以及jquery库文件和hwSlider插件,当然我建议把js文件放在页面底部加载。

<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>

然后在body中加入以下HTML代码:

<div class="hwslider"> 
 <ul> 
 <li><img src="images/s1.jpg" alt=""></li> 
 <li><img src="images/s2.jpg" alt=""></li> 
 <li>hwSlider.js</li> 
 </ul> 
</div>

按照上面的代码布局HTML结构,每个li元素包含一个滑块,滑块的内容可以是图片、文本或图文混排等等。

jQuery
按照jQuery插件开发模板,有兴趣的同学可以看看这篇文章关于jQuery插件模板的介绍:jQuery弹出层插件-hwLayer,我已经将代码封装成了jQuery插件:jquery.hwSlider.js,具体的代码请下载源码查看。调用Flexslider插件非常简单,使用如下代码:

$(function() { 
 $(".hwslider").hwSlider(); 
});

运行页面即可看到滑块效果。注意hwSlider默认使用滑块的尺寸600x320,你可以通过设置选项改变默认的滑块初始尺寸。

hwSlider选项设置
hwSlider提供了简单实用的选项设置,供开发者根据需求来设置。

内容滑动切换效果jquery.hwSlide.js插件封装

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 #Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 #Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 #Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 #Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 #Javascript
jQuery深拷贝Json对象简单示例
Jul 06 #Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 #Javascript
You might like
一个php作的文本留言本的例子(二)
2006/10/09 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
smarty简单分页的实现方法
2014/10/27 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
js的2种继承方式详解
2014/03/04 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
js模糊查询实例分享
2016/12/26 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
深入了解Python在HDA中的应用
2019/09/05 Python
python反转列表的三种方式解析
2019/11/08 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
Python读取yaml文件的详细教程
2020/07/21 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
工厂保洁员岗位职责
2013/12/04 职场文书
高中生自我评语大全
2014/01/19 职场文书
优秀医生事迹材料
2014/02/12 职场文书
春节联欢会策划方案
2014/05/16 职场文书
医院党员公开承诺书
2014/08/30 职场文书
投诉信范文
2015/07/02 职场文书
2016七一建党节慰问信
2015/11/30 职场文书