jQuery旋转木马式幻灯片轮播特效_jquery

本文为大家分享anoSlide是一款超轻型响应式jQuery旋转木马幻灯片插件，它适合在PC端与移动端实现旋转木马幻灯片特效。具体内容如下特点 响应式——适应任何视窗的宽度 混合内容 不需要CSS 轻量级( 基于jQuery构建 集成图像预加载 回调函数——onConstruct onStart,onEnd 多个可配置选项 延迟加载图片 自动旋转 容易扩展jquery实例：anoSlide使用方法引入核心文件登录后复制写入基础CSS样式，可根据项目完全自定义.carousel { position: relative; min-height: 20px; height: auto !important; height: 20px; background: url(images/loader.gif) center center no-repeat;}.carousel .next, .carousel .prev { display: none; width: 56px; height: 56px; position: absolute; bottom: 20px; left: 50%; margin-top: -28px; z-index: 9999; cursor: pointer;}.carousel .prev { margin-left: -60px; background: url(images/prev.png) 0 0 no-repeat;}.carousel .next { margin-right: -60px; background: url(images/next.png) 0 0 no-repeat;}.carousel li { display: none;}.carousel li img { width: 100%; height: auto;}.paging { position: absolute; z-index: 9998;}.paging > 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$('.carousel ul').anoSlide({ items: 1, speed: 500, prev: 'a.prev', next: 'a.next', lazy: true, auto: 4000})html Content goes here Content goes here Content goes here 登录后复制jquery幻灯片anoSlide多图JS$('.carousel[data-mixed] ul').anoSlide({ items: 5, speed: 500, prev: 'a.prev[data-prev]', next: 'a.next[data-next]', lazy: true, delay: 100})登录后复制HTML 登录后复制jquery旋转木马anoSlide分页js$('.carousel ul').anoSlide({ items: 1, speed: 500, prev: 'a.prev[data-prev-paging]', next: 'a.next[data-next-paging]', lazy: true, 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 ').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 Content goes here Content goes here Content goes here 登录后复制jquery幻灯片anoSlide标题js$('.carousel.captions ul').anoSlide({ items: 1, speed: 500, prev: 'a.prev[data-prev-caption]', next: 'a.next[data-next-caption]', lazy: true, 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 = $('').addClass('caption').css( { position: 'absolute', background: 'rgb(0,0,0)', color: 'rgb(255,255,255)', textShadow: 'rgb(0,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 HTML - No problemIt's really up to You to decide whether to use HTML or not."> 登录后复制以上就是关于jQuery旋转木马式幻灯片轮播特效，希望对大家的学习有所帮助。