jquery插件,全屏响应式轮播
jquery插件 jquery-reSlider
更新信息
2015-04-18
第一个版本上线 添加基础功能 全屏轮播,震撼的视觉效果初始预加载 加入加载进度 优化整体加载效果预计增加功能
这是一款全屏轮播插件,非常简单 使用场景全屏企业网站上,做展示效果简介
基本用法
1.首先先引入组件的javascript文件,和依赖的jquery库
<!-- jQuery -->
<script src="assets/js/lib/jquery.min.js"></script>
<!-- Client JavaScript -->
<script src="assets/js/jquery.reslider.js"></script>
2.基本HTML结构如下:要保证类名的准确无误
<!-- slider-->
<div class="slider">
<div class="jquery-reslider">
<div class="slider-block" data-url="assets/images/test.jpg"></div>
<div class="slider-block" data-url="assets/images/test2.jpg"></div>
<div class="slider-block" data-url="assets/images/test3.jpg"></div>
<div class="slider-block" data-url="assets/images/test2.jpg"></div>
<div class="slider-direction slider-direction-next"></div>
<div class="slider-direction slider-direction-prev"></div>
<div class="slider-dots">
<ul>
</ul>
</div>
</div>
</div>
<!-- end build-->
3.调用方法: 在刚刚引入的script文件下一行键入
<script>
$(function(){
$('.jquery-reslider').reSlider({
speed:1000,//设置轮播的高度
delay:5000,//设置轮播的延迟时间
imgCount:4,//设置轮播的图片数
dots:true,//设置轮播的序号点
autoPlay:true//设置轮播是否自动播放
})
})
</script>
参数说明
speed
默认值为1000 用于图片切换过渡速度
delay
默认值为5000 用于调节自动播放时间
imgCount
默认值为4 用于设置图片个数
dots
默认值为true 用于设置轮播的序号点
autoPlay
默认值为true 用于设置是否自动播放
demo预览地址
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。