最近需要寻找一个比较酷的页面幻灯显示插件,发现Nivo Slider是一个非常不错的选择。如果你需要演示新产品,或者你需要比较酷的幻灯片转化效果,Nivo幻灯是你的一个选择之一。
主要特性:
这里我稍微说一下,jQuery的插件到处都有,我们需要有目的的选择一下插件,这个网站拥有自己独立的网站,网站非常正规,别的不说,使用着就放心。而且有技术支持团队,不过只支持付费用户。幻灯效果和效率都不错,堪比flash的幻灯。例如, 这个flash的幻灯显示。
类库引用:
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>
调用代码:
$(window).load(function() { $('#slider').nivoSlider(); });
你可以自定义如下选项:
代码示例:
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: 'random', // Specify sets like: 'fold,fade,sliceDown' slices: 15, // For slice animations boxCols: 8, // For box animations boxRows: 4, // For box animations animSpeed: 500, // Slide transition speed pauseTime: 3000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: true, // Next & Prev navigation directionNavHide: true, // Only show on hover controlNav: true, // 1,2,3... navigation controlNavThumbs: false, // Use thumbnails for Control Nav controlNavThumbsFromRel: false, // Use image rel for thumbs controlNavThumbsSearch: '.jpg', // Replace this with... controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src keyboardNav: true, // Use left & right arrows pauseOnHover: true, // Stop animation while hovering manualAdvance: false, // Force manual transitions captionOpacity: 0.8, // Universal caption opacity prevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text randomStart: false, // Start on a random slide beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded }); }); </script>
HTML代码
<div class="slider-wrapper theme-default"> <div class="ribbon"></div> <div id="slider" class="nivoSlider"> <img src="images/toystory.jpg" alt=""/> <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption"/></a> <img src="images/walle.jpg" alt="" data-transition="slideInLeft"/> <img src="images/nemo.jpg" alt="" title="#htmlcaption"/> </div> <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div> </div>
如何为每一个幻灯自定义变化效果:
<img src="images/slide1.jpg" alt="" data-transition="slideInLeft"/>
希望大家喜欢!