hwSlider-内容滑动切换效果（三）：jquery.hwSlide.js插件封装

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

hwSlider具有以下特性：

HTML

[code=html]
<link type="text/css"  rel="stylesheet" href="css/hwslider.css" />
<script src="http://apps.bdimg测试数据/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hwSlider.js"></script>

[code=html]
<p class="hwslider">
	<ul>
		<li><img src="images/s1.jpg" alt=""></li>
		<li><img src="images/s2.jpg" alt=""></li>
		<li>hwSlider.js</li>
	</ul>
</p>

jQuery

[code=js]
$(function() { 
    $(".hwslider").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 回调函数，滑动一个滑块后，调用该函数

以上就是hwSlider-内容滑动切换效果（三）：jquery.hwSlide.js插件封装的内容，更多相关内容请关注PHP中文网（HdhCmsTestgxlcms测试数据）！

-->
查看更多关于hwSlider-内容滑动切换效果（三）：jquery.hwSlide.js插件封装的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did65604

更新时间：2022-10-13 阅读：37次

hwSlider-内容滑动切换效果（三）：jquery.hwSlide.js插件封装

hwSlider具有以下特性：

jQuery [code=js] $(function() { $(".hwslider").hwSlider(); });

jQuery
[code=js] $(function() { $(".hwslider").hwSlider(); });