炫酷的jquery幻灯片插件-SLIDESJS

 查看演示  website  立即下载

使用步骤

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 当动画结束时调用的函数 函数

PREVIOUS:
NEXT:
图片可旋转弹出展示框插件-WOWWINDOW
多级菜单插件-SUPERFISH