jQuery Slider 焦点图切换插件(带时间进度条)

jQuery Slider 焦点图切换插件(带时间进度条)
插件描述:jQuery slider是一个焦点图切换插件,鼠标悬停在焦点图上,显示左右按钮,支持手动切换,同时也显示暂停或者开始按钮,可以让你的焦点图暂时停止切换,底部带有切换时间进度条。灵活的参数设置,使用容易方便。

使用方法

载入JavaScript和CSS文件:

<link rel="stylesheet" href="jquery_slider/jquery.slider.css" />
<!--[if IE 6]>
<link rel="stylesheet" href="jquery_slider/jquery.slider.ie6.css" />
<![endif]-->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> //支持最高1.8.3版本
<script type="text/javascript" src="jquery_slider/jquery.slider.min.js"></script>

DOM结构:

<div class="wrapper" style="width:900px;margin:50px auto 0;">
  <div class="slider">
    <div><a href="#"><img src="images/slide_1.jpg" /></a></div>
    <div><a href="#"><img src="images/slide_2.jpg" /></a></div>
    <div><a href="#"><img src="images/slide_3.jpg" /></a></div>
    <div><a href="#"><img src="images/slide_4.jpg" /></a></div>
  </div>
</div>

JavaScript调用方式:

jQuery(document).ready(function(){
  $(".slider").slideshow({
    width: 900,
    height: 325,
  });
});

参数说明

名称 类型 默认值 说明
name string 'jquery-slider' class前缀(请勿随意修改)
navigation boolean true 是否显示左右方向控制按钮
selector boolean true 是否显示数字控制按钮
timer boolean true 是否显示时间进度条
control boolean true 是否显示暂停按钮
pauseOnClick boolean true 是否显示数字控制按钮
pauseOnHover boolean true 焦点图获取焦点时是否暂停
loop boolean true 是否循环播放
slideshow boolean true 是否自动播放
width string
焦点图的宽度
height string
焦点图的高度
delay integer 4500 切换间隔
duration integer 400 切换效果的持续时间
bars integer 9
columns integer 7
rows integer 3
speed integer 80
padding integer 8
easing string "easeOutCubic"
transition string [](随机) 焦点图切换效果, eg:fade|bar|square|slide|explode|swipe|slip, 更多特效查看
onComplete function function(){}
onSlideshowEnd function function(){}