当前位置:JS特效 » 幻灯片和轮播图 » 简单的支持移动设备的轮播图jQuery插件
 简单的支持移动设备的轮播图jQuery插件
如果您觉得内容不错,请分享:

插件介绍

这是一款简单的支持移动设备的轮播图jQuery插件。该jQuery轮播图插件采用响应式设计,支持自动轮播,圆点导航和箭头导航,以及CSS3过渡动画效果等。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:59
简要教程

这是一款简单的支持移动设备的轮播图jQuery插件。该jQuery轮播图插件采用响应式设计,支持自动轮播,圆点导航和箭头导航,以及CSS3过渡动画效果等。

使用方法

在页面引入jquery,slider.js和slider.css文件。


         
         
                
HTML结构

该jquery轮播图的基本HTML结构如下:

文字描述信息...
文字描述信息...
文字描述信息...
初始化插件

在页面DOM元素加载完毕之后,可以通过ikSlider()方法来初始化该jquery轮播图插件。

$(".slider-container").ikSlider();               
                

也可以在初始化时显示指定的图片:

$(".slider-container").ikSlider(3);               
                

配置参数

该jquery轮播图插件的默认配置参数如下:

touch   : true,
controls: true,
arrows  : true,
infinite: false,
delay   : 10000, // 10s
caption : false,
speed   : 300,
cssEase : 'ease-out',
responsive: true,
autoPlay: true,
pauseOnHover: true                  
                
Top