JQuery图片轮播插件jquery.slider.js

简介

jquery.slider.js是一款JQuery图片轮播插件，可以有暂停等多种功能的图片轮播，也有多种渐变效果，非常漂亮！

（下载的附件中带有DEMO）

参数说明：

width      : 900,   宽度（必用）
height     : 325,   高度（必用）
transition : 'bar'  渐变类型:有'fade'渐隐渐变,'square'正方形块渐变，'bar'从右向左切换渐变，'
             squareRandom'正方形块随机渐变,'explode'正方形块爆炸渐变 'fountain'向上喷水渐变,
             'rain'下雨渐变,'random'随机效果（常用）
navigation : true,   是否显示左右切换的导航（常用）
selector   : true,     是否显示右下角的方块按钮（常用）
control    : true,      是否显示中间的暂停按钮（常用）
timer      :true,    是否显示时间的进度条（常用）
pauseOnClick: true, 表面意思是是否单击暂停，但是好像没有效果
pauseOnHover: true, 鼠标移到图片上是否暂停
loop       : true,         是否循环
slideshow  : true,    图片是否切换
delay      : 4500,        延迟时间，4500毫秒表示4.5秒，因为1秒等于1000毫秒
duration   : 400,      表面意思是持续时间，但是好像也没有效果
bars       : 9,     这个表示transition的过渡效果'bars'的数量，9表示有9个方块，1表示就有1个
columns    : 7,         表面意思是7列，但是好像也没有什么效果
rows       : 3,            看不出什么效果
speed      : 80,          一张幻灯切换到另一张幻灯时的速度
padding    : 8,         看不出效果
easing     : "easeOutCubic", 擦除效果，这个需要另一款插件的结合
transition : 'random',  过渡效果
onComplete : function() {},  完成时运行函数
onSlideshowEnd: function() {}   幻灯片结束之运行函数，这个和上一个区别在于时间的判断

使用

1.  引入 jquery.js 和 jquery.slider.js 文件

2.  HTML

<div>
  <div>
    <img src="images/slide_1.jpg" alt="">
  </div>
  
  <div>
    <img src="images/slide_2.jpg" alt="">
  </div>
  
  <div>
    <img src="images/slide_3.jpg" alt="">
  </div>
  
</div>

3.  调用

<script type="text/javascript">
  jQuery(document).ready(function($) {
    $(".slider").slideshow({
      width: 900,
      height: 325,
      transition: 'random'
    });
  });
</script>

相关链接

GitHub 地址 ：  https://github.com/wycm/jquery.slider.js

在线演示地址：https://www.jq22.com/yanshi11469