php幻灯片轮播,jQuery实现旋转幻灯片轮播效果（附代码）

这次给大家带来jQuery实现旋转幻灯片轮播效果(附代码)，jQuery实现旋转幻灯片轮播效果的注意事项有哪些，下面就是实战案例，一起来看一下。

特点响应式——适应任何视窗的宽度

混合内容

不需要CSS

轻量级(< 8 kb未压缩)

基于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 = $('

{

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 = $('').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 = $('

{

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

• 

• 

• 

• 

• 

• 

• 

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：