描述:jquery.slider.js可以有暂停等多种功能的图片轮播,也有多种渐变效果,非常漂亮!如果你用多了,一定会爱上它的!建议读者们一定要好好看看它的参数说明! 图片展示:
官方网址:暂无!
兼容浏览器:IE6+/Firefox/Chrome(需要相应的ie6下的CSS)
JS下载:http://www.ijquery.cn/js/slider/jquery.slider.min.js
预览: http://www.ijquery.cn/study/demo/slider
打包下载:http://www.ijquery.cn/study/demo/slider/slider.zip
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>
JS和CSS引用代码:
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://www.ijquery.cn/js/slider/jquery.slider.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $(".slider").slideshow({ width : 900, height : 325, transition: 'random' }); }); </script> <link rel="stylesheet" type="text/css" href="http://www.ijquery.cn/js/slider/jquery.slider.css" /> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="http://www.ijquery.cn/js/slider/jquery.slider.ie6.css" /> <![endif]-->
参数说明:
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() {} 幻灯片结束之运行函数,这个和上一个区别在于时间的判断