最新消息:

第34款插件:jquery.slider.js可以有暂停等多种功能的图片轮播

图片幻灯插件 杨红伟 3838浏览 0评论

描述:jquery.slider.js可以有暂停等多种功能的图片轮播,也有多种渐变效果,非常漂亮!如果你用多了,一定会爱上它的!建议读者们一定要好好看看它的参数说明! 图片展示:

1

官方网址:暂无!
兼容浏览器:IE6+/Firefox/Chrome(需要相应的ie6下的CSS)
JS下载:http://www.ijquery.cn/js/slider/jquery.slider.min.js
预览:
http://www.ijquery.cn/demo/slider
打包下载:
http://www.ijquery.cn/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() {}   幻灯片结束之运行函数,这个和上一个区别在于时间的判断

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址