显示分页
anoSlide 本身并不支持分页,是通过扩展实现的。
JavaScript
$(function(){ $('.carousel ul').anoSlide({ items: 1, speed: 500, prev: 'a.prev', next: 'a.next', onConstruct: function(instance){ var paging = $('<div/>').addClass('paging fix').css({ position: 'absolute', top: 1, left:50 + '%', width: instance.slides.length * 40, marginLeft: -(instance.slides.length * 40)/2 }); 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
<div class="carousel"> <a class="prev"></a> <ul> <li><a href="javascript:"><img src="images/slides/1.jpg"></a></li> <li><a href="javascript:"><img src="images/slides/2.jpg"></a></li> <li><a href="javascript:"><img src="images/slides/3.jpg"></a></li> <li><a href="javascript:"><img src="images/slides/4.jpg"></a></li> <li><a href="javascript:"><img src="images/slides/5.jpg"></a></li> <li><a href="javascript:"><img src="images/slides/6.jpg"></a></li> <li><a href="javascript:"><img src="images/slides/7.jpg"></a></li> </ul> <a class="next"></a> </div>