Easy Slider: 功能强大简单易用的jQuery滑动门插件

Easy Slider 是一个滑动门插件,支持任何图片或内容,当点击时实现横向或纵向滑动。它拥有一系列丰富的参数设置,可通过CSS来进行完全的控制。所以,基本上你只需要链接这个插件文件后,设置好内容,然后样式化CSS就可以了。

EasySlider的功能

  • 支持横向或纵向滑动
  • 支持自动滚动
  • 支持连续滑动
  • “上一屏”和”下一屏按钮”
  • “到第一屏”和”最后一屏”按钮
  • 隐藏的控制
  • 可选的控制按钮包围标记
  • 同一页面可支持多个滑动门
  • 可设置滑动速度、是否自动、停顿间隔等等

EasySlider的使用方法

1. 首先是HTML标记

<div id="slider">
	<ul>

	<li>content here...</li>
	<li>content here...</li>
	<li>content here...</li>
	...
	</ul>
<span id="prevId"><a href="javascript:void(0);">previous</a></span>
<span id="nextBtn"><a href="javascript:void(0);">Next</a></span>
</div>

: 每个li里面的内容就是一个滑动层,下面的span用于滑动导航。

2. 然后调用jQuery库和EasySlider插件

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/easySlider.js"></script>

: 放于</header>之前

3. 初始化插件代码


<script type="text/javascript">
$(document).ready(function(){
	$("#slider").easySlider({
		prevText: 'previous Slide',
		nextText: 'Next Slide',
		orientation: 'vertical'
	});
});
</script>

: 放于上面的代码下面,其中的#sidebar对应HTML标记中div元素的CSS选择器,指明脚本应用于这个层,你也可以使用class名称,那这里就写成类似于
$(“.list”)。

.easyslider 拥有许多参数,具体查看作者的原文.

4. CSS样式定义


#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider, #slider li{
	width:500px;
	height:200px;
	overflow:hidden;
	}
span#prevBtn{}
span#nextBtn{}

: 根据你自己的需要进行样式化。

这样就OK了。

EasySlider的DEMO演示

EasySlider的原文链接

“Easy Slider: 功能强大简单易用的jQuery滑动门插件”的6个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注