SmallSlider 图片轮播插件(网络收集)

最新推荐文章于 2021-03-28 00:17:58 发布

vbdavid

最新推荐文章于 2021-03-28 00:17:58 发布

阅读量525

点赞数

分类专栏： javascript 文章标签：图片滚动插件轮播插件

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

示例代码：

HTML部分

HTML代码：

<div id=”flashbox” class=”smallslider”>
<ul>
<li><a href=”#”><img src=”rs/images/001.jpg” title=”" alt=”图片标题1″ /></a></li>
<li><a href=”#”><img src=”rs/images/002.jpg” title=”" alt=”图片标题2″ /></a></li>
<li><a href=”#”><img src=”rs/images/003.jpg” title=”" alt=”图片标题3″ /></a></li>
<li><a href=”#”><img src=”rs/images/004.jpg” title=”" alt=”图片标题4″ /></a></li>
<li><a href=”#”><img src=”rs/images/005.jpg” title=”" alt=”图片标题5″ /></a></li>
</ul>
</div>

JS部分

JS代码：

<script type=”text/javascript”>
$(document).ready(function(){
$(‘#flashbox’).smallslider({
onImageStop:false,
switchEffect:’ease’,
switchEase: ‘easeOutBounce’,
switchPath: ‘up’,
switchMode: ‘hover’,
textSwitch:2,
textPosition: ‘top’,
textAlign:’center’
});
});
</script>

怎么样？够简单吧？完全不需要写额外的HTML代码。
调用方法：

1。保证你的页面链接进3个文件：
<script type=”text/javascript” src=”rs/js/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”rs/js/jquery.smallslider.js”></script>
<link rel=”stylesheet” type=”text/css” href=”rs/css/smallslider.css” media=”screen” />

2。HTML 结构如下：
1)，最外层必须为一个div元素，这个div需要指定一个class为：smallslider。
2)，div内的HTML结构为一个ul标签，ul标签内为li标签，li内为a标签，a内为img标签，即：div—>ul—>li—>a—>img 。
3)，img标签的alt属性为显示的标题文字内容，所以必须要有。

3，初始化轮播图：
<script type=”text/javascript”> $(document).ready(function(){
$(function(){
$(‘#flashbox’).smallslider();
});
});
</script> 有一点要注意，就是必须固定你的调用元素的高度和宽度。一般情况下，切换的图片高度和宽度都是固定的，如果你图片大小不一，切换的时候会很难看。

参数列表：

参数	默认值	说明
time	3000	切换时间间隔，单位毫秒，1秒=1000毫秒
autoStart	true	是否自动开始播放
onImageStop	false	鼠标放在图片上时，是否停止播放
switchMode	‘hover’	图片切换的方式，click为单击切换，hover为鼠标移动到按钮上时切换
switchEffect	‘fadeOut’	切换特效,fadeOut，ease，none,
switchPath	‘left’	切换的方向，可选值为：up ， left ，即向上，向左
switchEase	‘easeOutQuart’	当SwitchEffect为’ease’时可用。可选值列表如下：["easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint", "easeInSine", "easeOutSine", "easeInOutSine", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeInCirc", "easeOutCirc", "easeInOutCirc", "easeInElastic", "easeOutElastic", "easeInOutElastic", "easeInBack", "easeOutBack", "easeInOutBack", "easeInBounce", "easeOutBounce", "easeInOutBounce"]，各种切换方式之间差别不是很大，有兴趣可以逐一测试
switchTime	600	切换时间，单位毫秒，1秒=1000毫秒
actionGap	200	鼠标触发延时，单位毫秒
buttonPosition	‘rightBottom’	按钮位置表示，共有四个值：leftTop，leftBottom,rightTop,rightBottom
buttonOffsetX	10	水平方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
buttonOffsetY	4	竖直方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
buttonSpace	4	按钮之间的间隔单位为像素，但不要加px
showText	true	是否显示标题，如果不显示，则只显示按钮
showButtons	true	是否显示按钮，默认显示
textLink	true	是否给显示的标题加上链接，如果为false，只显示标题，标题不可单击
textSwitch	0	标题是否运动显示，如果为0则不动，1 标题动，2 标题和背景一起动。
textPosition	”	标题栏的位置，默认为空，即和按钮的位置一致，取值 top , bottom
textAlign	‘center’	标题栏取 top 或 bottom 时，有效，left, center, right