本文为大家分享anoSlide是一款超轻型响应式jQuery旋转木马幻灯片插件，它适合在PC端与移动端实现旋转木马幻灯片特效。具体内容如下
特点
- 响应式——适应任何视窗的宽度
- 混合内容
- 不需要CSS
- 轻量级(< 8 kb未压缩)
- 基于jQuery构建
- 集成图像预加载
- 回调函数——onConstruct onStart,onEnd
- 多个可配置选项
- 延迟加载图片
- 自动旋转
- 容易扩展
jquery实例：anoSlide使用方法
引入核心文件
rush:js;">
写入基础CSS样式，可根据项目完全自定义
a {
display: block;
cursor: pointer;
width: 40px;
height: 40px;
float: left;
background: url(images/dots.png) 0px -40px no-repeat;
}
.paging > a:hover,.paging > a.current {
background: url(images/dots.png) 0px 0px no-repeat;
}
.badge {
display: block;
width: 104px;
height: 104px;
background: url(images/badge.png) 0 0 no-repeat;
z-index: 9000;
position: absolute;
top: -3px;
left: -3px;
}
img {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
-o-user-select: none;
user-select: none;
}
jquery旋转木马anoSlide混合显示
JS
rush:js;">
$('.carousel ul').anoSlide(
{
items: 1,speed: 500,prev: 'a.prev',next: 'a.next',lazy: true,auto: 4000
})
html
jquery幻灯片anoSlide多图
JS
rush:js;">
$('.carousel[data-mixed] ul').anoSlide(
{
items: 5,prev: 'a.prev[data-prev]',next: 'a.next[data-next]',delay: 100})
HTML
jquery旋转木马anoSlide分页
js
rush:js;">
$('.carousel ul').anoSlide(
{
items: 1,prev: 'a.prev[data-prev-paging]',next: 'a.next[data-next-paging]',onConstruct: function(instance)
{
var paging = $('').addClass('paging fix').css(
{
position: 'absolute',top: 1,left:50 + '%',width: instance.slides.length * 40,marginLeft: -(instance.slides.length * 40)/2
})
/* Build paging */
for (i = 0,l = instance.slides.length; i < l; i++)
{
var a = $('<a/>').data('index',i).appendTo(paging).on(
{
click: function()
{
instance.stop().go($(this).data('index'));
}
});
if (i == instance.current)
{
a.addClass('current');
}
}
instance.element.parent().append(paging);},onStart: function(ui)
{
var paging = $('.paging');
paging.find('a').eq(ui.instance.current).addClass('current').siblings().removeClass('current');}
})
html
js
rush:js;">
$('.carousel.captions ul').anoSlide(
{
items: 1,prev: 'a.prev[data-prev-caption]',next: 'a.next[data-next-caption]',onStart: function(ui)
{
/* Remove existing caption in slide */
ui.slide.element.find('.caption').remove();
},onEnd: function(ui)
{
/* Get caption content */
var content = ui.slide.element.data('caption');
/* Create a caption wrap element */
var caption = $('<div/>').addClass('caption').css(
{
position: 'absolute',background: 'rgb(0,0)',color: 'rgb(255,255,255)',textShadow: 'rgb(0,0) -1px -1px',opacity: 0.5,top: -100,left: 50,padding: 20,webkitBorderRadius: 5,mozBorderRadius: 5,borderRadius: 5
}).html(content);
/* Append caption to slide and animate it. Animation is really up to you. */
caption.appendTo(ui.slide.element).animate(
{
top:50
});}
})
html
以上就是关于jQuery旋转木马式幻灯片轮播特效，希望对大家的学习有所帮助。
