<div> <a></a> <ul> <li>Content goes here</li> <li>Content goes here</li> <li>Content goes here</li> </ul> <a></a> </div>
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 = $('<div/>').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
<div> <a data-prev-caption></a> <ul> <li data-caption="Adding captions is really easy"> <figure><img data-src="https://www.jb51.net/images/slides/1.jpg" src="" /></figure> </li> <li data-caption="anoSlide's callback functions can be used for adding Captions"> <figure><img data-src="https://www.jb51.net/images/slides/2.jpg" src="" /></figure> </li> <li data-caption="<span>HTML - No problem</span><br /><br />It's really up to You to decide whether to use HTML or not."> <figure><img data-src="https://www.jb51.net/images/slides/3.jpg" src="" /></figure> </li> <li> <figure><img data-src="https://www.jb51.net/images/slides/4.jpg" src="" /></figure> </li> <li> <figure><img data-src="https://www.jb51.net/images/slides/5.jpg" src="" /></figure> </li> <li> <figure><img data-src="https://www.jb51.net/images/slides/6.jpg" src="" /></figure> </li> <li> <figure><img data-src="https://www.jb51.net/images/slides/7.jpg" src="" /></figure> </li> </ul> <a data-next-caption></a> <a></a> </div>
以上就是关于jQuery旋转木马式幻灯片轮播特效，希望对大家的学习有所帮助。
您可能感兴趣的文章: