html5 插件之 banner 滚动插件

 

swipeslider支持移动端和桌面设备的轻量级幻灯片插件

swipeslider幻灯片插件的github地址为：https://github.com/AlexEmashev/swipeslider

 

支持图片和其它HTML内容，支持幻灯片内容无限循环播放。

它的特点还有：

支持桌面设备设备事件和移动设备的swipe事件。

支持前后导航按钮。

支持分页导航按钮。

可以在幻灯片中放置图片或任何HTML元素。

支持多种动画效果。

使用CSS3 transition来制作平滑过渡效果。

响应式设计。

 

CSS样式

可以通过下面的CSS class类来自定义幻灯片的样式。

class	描述
.swipslider	包含幻灯片的父容器。
.sw-slides	幻灯片容器。
.sw-slide	幻灯片的slide，可以包含图片或其它HTML元素。
.sw-slide > img	包含图片的slide。
.sw-content	包含其它HTML元素的slide。
.sw-next-prev	前后导航按钮整体样式。
.sw-prev	向前按钮，使用::after伪元素来覆盖内容。
.sw-next	向后按钮，使用::after伪元素来覆盖内容。
.sw-bullet	分页导航按钮容器。
.sw-bullet li	单个分页导航按钮。
.sw-bullet li.active	当前激活的分页导航按钮。

 初始化插件

在页面DOM元素加载完毕之后，可以通过swipeslider()方法来初始化该幻灯片插件。

1 2 3 4 5

<script>   $(window).load(function() {     $('#sample_slider').swipeslider();   }); </script>

配置参数

可以在初始化插件的时候以对象的方式传入配置参数：

1	$('#sample_slider').swipeslider({autoPlay: false, swipe: false});

可用的配置参数有：

参数	默认值	描述
sliderHeight	'60%'	设置幻灯片的高度。如果你想根据宽度来自动改变高度，可以设置为百分比。如果设置为像素则使用固定高度。
transitionDuration	500	幻灯片动画的持续时间，单位毫秒。
timingFunction	'ease-out'	过渡动画的easing效果（CSS easing函数）。
autoPlay	true	是否自动播放幻灯片。
autoPlayTimeout	3000	自动播放的时间间隔，单位毫秒。
prevNextButtons	true	是否显示前后导航按钮。
bullets	true	是否显示分页导航按钮。
swipe	true	是否允许移动端的swipe事件。