建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:12收藏

简介


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

(下载的附件中带有DEMO)


JQuery图片轮播插件jquery.slider.js-示例图



参数说明:


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