当前位置:主页 > jquery插件 > 轮播图 >

jquery炫酷的幻灯片插件-SLIDESJS

栏目分类:轮播图   模板编号:JQ00001    发布日期:2017-01-13   来源:网络   浏览次数:次     在线预览
插件描述:炫酷的幻灯片插件,SLIDESJS

使用步骤

1、引用以下的js和css文件

<link rel="stylesheet" type="text/css" href="css/wowwindow.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.wowwindow.min.js"></script>

2、加入以下JS代码

$(function(){
    $(/’#slides/’).slides({
    preload: true,
    preloadImage: /’img/loading.gif/’,
    play: 5000,
    pause: 2500,
    hoverPause: true
    });
});

参数配置

参数名 参数说明 可选值 默认值
preload 在幻灯片播放中是否预加载指定图片 true或false false
preloadImage 预加载图片的路径 路径字符串 /img/loading.gif
container 幻灯片容器的ID ID字符串 slides_container
generateNextPrev 是否自动生成 next/prev 按钮 true或false false
next next 按钮的样式名 字符串 next
prev prev 按钮的样式名 字符串 prev
pagination 如果你不使用分页,可以设置为flase,但不是必须的 true或false 
generatePagination 是否自动生成分页 true或false true
paginationClass 分页的样式名 字符串 pagination
currentClass 当前页码的样式名 字符串 current
fadeSpeed 淡入淡出动画的速度 整数,单位为毫秒 350
fadeEasing 淡入淡出的效果 字符串,必须要包含 Easing plugin 
slideSpeed 设置幻灯片滑动的毫秒时间 整数 350
slideEasing 滑动的效果 字符串,必须要包含 Easing plugin 
start 设置从第几张幻灯片开始 整数 1
effect 设置幻灯片next/prev切换和分页切换方式的效果 字符串 slide
crossfade Crossfade images in a image based slideshow true或false false
randomize 是否随机切换效果 true或false false
play 自动播放切换幻灯的时间间隔 整数 0不自动切换
pause 当点击 next/prev或分页按钮后暂停多少毫秒才切换图片 整数 
hoverPause 当鼠标移动到图片上的时候,幻灯片切换是否暂停 true或false false
autoHeight 是否自动调整高度 true或false false
autoHeightSpeed 设置自动调整高度的时间毫秒数 整数 350
bigTarget Set to true and the whole slide will link to next slide on click true或false false
animationStart 当动画开始时调用的函数 函数 
animationComplete 当动画结束时调用的函数 函数


在线演示 立即下载
打赏本站
云盘密码:cylv

标签: 炫酷 SLIDESJS

上一篇:没有了
Copyright © 2014 资源盒子 版权所有   黔ICP备14004500号-3   TAG
轮播图 滚动代码 表单按钮 音频视频 客服代码 弹出提示 TAB选项卡 导航菜单 页面布局 图片展示 UI
织梦标签工具下载 ↑↓
织梦标签工具下载