分享十五个最佳jQuery幻灯插件和教程

<p>在网站前端中使用jQuery库已经变得越来越流行，前端开发人员发布或撰写的相关的插件和教程也与日俱增。</p>

<p>幻灯(通常也被称为“内容滑动”、内容切换效果、焦点图等)是在网站或博客的较小区域展示大量内容的很好的方法。动态的自动滑动内容在很多网站上都是很流行的。你是否也对在自己的网站上实现类似的效果感兴趣？那就看一下本文列出的jQuery插件吧！</p>

<p><strong>1. jFlow </strong></p>
<script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>

<p><a href="http://net.tutsplus.com/javascript-ajax/using-the-wonderful-jflow-plugin-screencast/">官方网站</a> | <a href="http://nettuts.s3.amazonaws.com/078_screencast2/jFlowTutorial/index.htm">演示</a></p>

<p>一个漂亮而整洁的图片幻灯，被nettut推荐，如果你想自己做一个图片幻灯效果，就去看看吧。</p>

<p><img height="192" alt="jFlow" src="http://www.chinaz.com/upimg/allimg/100323/1534550.jpg" width="468" /></p>

<p><strong>2. 使用jQuery UI实现推荐内容的幻灯展示</strong></p>

<p><a href="http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/">官方网站</a></p>

<p>这是一个教你如何“使用一种很有冲击力的方法展示你的网站/博客的最佳内容以吸引更多眼球”的很不错的教程。该文章介绍展示推荐内容的技术中的一个是自动播放内容幻灯。</p>

<p><img height="192" alt="" src="http://www.chinaz.com/upimg/allimg/100323/1536210.jpg" width="468" border="0" /></p>

<p><strong>3. 创建漂亮的jQuery幻灯教程</strong></p>

<p><a href="http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html">官方网站</a> | <a href="http://dreamcss.comli.com/jquery%20sliders/">演示</a></p>

<p>该教程介绍如何开发/创建漂亮的使用图片描述和名称的jQuery幻灯。</p>

<p><img height="205" alt="Create Beautiful jQuery sliders tutorial" src="http://www.chinaz.com/upimg/allimg/100323/1534551.jpg" width="468" /></p>

<p><strong>4. 基于jQuery的一个简单的内容幻灯效果</strong></p>

<p><a href="http://www.brenelz.com/blog/2009/03/31/build-a-content-slider-with-jquery/">官方网站</a> | <a href="http://ennuidesign.com/demo/contentslider/">演示</a></p>

<p>Brenelz的网站开发技巧的一个简单的内容幻灯效果。</p>

<p><img height="215" alt="A Basic Content Slider With jQuery" src="http://www.chinaz.com/upimg/allimg/100323/1534552.jpg" width="468" /></p>

<p><strong>5. <a href="http://www.jumpeyecomponents.com/Flash-Components/User-Interface/JC-Play-List-285/">JC Play List</a></strong></p>

<p><a href="http://www.jumpeyecomponents.com/Flash-Components/User-Interface/JC-Play-List-285/">官方网站</a> | <a href="http://www.jumpeyecomponents.com/Flash-Components/User-Interface/JC-Play-List-285/examples.htm">演示</a></p>
<script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>

<p>免费而好用的使用Flash组件创建的一个jQuery幻灯插件，特别是对XML、RSS2.0、Picasa和Flickr等多媒体列表等非常方便。</p>

<p><img height="229" alt="JC Play List" src="http://www.chinaz.com/upimg/allimg/100323/1534553.jpg" width="468" /></p>

<p><strong>6. Easy Slider </strong></p>

<p><a href="http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding">官方网站</a> | <a href="http://cssglobe.com/lab/easyslider1.5/04.html">演示</a></p>

<p>一个JQuery插件，允许图片或任何内容在点击的时候水平/垂直滑动。</p>

<p><img height="143" alt="Easy Slider" src="http://www.chinaz.com/upimg/allimg/100323/1534554.jpg" width="468" /></p>

<p><strong>7.jqGalScroll </strong></p>

<p><a href="http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/">官方网站</a></p>

<p>jQuery Gallery Scroller (jqGalScroll)使用图片列表，并创建一个光滑的可以垂直、水平或对角滚动的图片相册。该插件同样能创建分页，从而你就可以轻松的浏览你的照片了。</p>

<p><img height="315" alt=" jqGalScroll" src="http://www.chinaz.com/upimg/allimg/100323/1534555.jpg" width="468" /></p>

<p><strong>8. Image Gallery </strong></p>

<p><a href="http://enhance.qd-creative.co.uk/2008/07/12/an-image-gallery/">官方网站</a></p>

<p>这个一点儿都不复杂——它是一个非常简单的图片画廊/查看器。你可以像这样调用图片:</p>

<p><img height="315" alt="Image Gallery" src="http://www.chinaz.com/upimg/allimg/100323/1534556.jpg" width="468" /></p>

<p></p>

<p><strong>9.使用jQuery UI 制作内容幻灯</strong></p>

<p><a href="http://net.tutsplus.com/tutorials/javascript-ajax/making-a-content-slider-with-jquery-ui/">官方网站</a> | <a href="http://nettuts.s3.amazonaws.com/377_slider/slider_sourcefiles/slider.html">演示</a></p>

<p>Dan Wellman为NetTuts写的教程，很详细。</p>

<p><img height="332" alt="Making a Content Slider with jQuery UI" src="http://www.chinaz.com/upimg/allimg/100323/1534557.jpg" width="468" /></p>

<p><strong>10. 创建一个自动播放的推荐内容幻灯</strong></p>

<p><a href="http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/">官方网站 </a>| <a href="http://css-tricks.com/examples/FeaturedContentSlider/">演示</a></p>

<p>来自CSS-Tricks的Chris Coyier 写的一篇教程。该脚本基于Coda Slider。它包含一些扩展的特性：</p>

<p><img height="298" alt="Creating a Slick Auto-Playing Featured Content Slider" src="http://www.chinaz.com/upimg/allimg/100323/1534558.jpg" width="468" /></p>
<script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>

<p><strong>11. slideViewer</strong></p>

<p><a href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html">官方网站</a></p>

<p>SlideViewer是一个轻量的(1.5Kb)jQuery插件，它可以让你随时通过编写几行HTML代码来创建一个图片画廊.</p>

<p><img height="277" alt="slideViewer" src="http://www.chinaz.com/upimg/allimg/100323/1534559.jpg" width="468" /></p>

<p><strong>12. Start/Stop Slider</strong></p>

<p><a href="http://css-tricks.com/startstop-slider/">官方网站</a> | <a href="http://css-tricks.com/examples/StartStopSlider">演示</a></p>

<p><img height="178" alt="Start/Stop Slider" src="http://www.chinaz.com/upimg/allimg/100323/15345510.jpg" width="468" /></p>

<p><strong>13. 一个简约的jQuery插件</strong></p>

<p><a href="http://www.webdesignbooth.com/step-by-step-to-create-content-slider-using-jflow-a-minimalist-jquery-plugin/">官方网站</a> | <a href="http://demo.webdesignbooth.com/content-slider/">演示</a></p>

<p>WebDesignBooth的一个教程，介绍如何使用强大的jQuery库创建简单的内容幻灯效果。</p>

<p><img height="199" alt="A Minimalist jQuery Plugin" src="http://www.chinaz.com/upimg/allimg/100323/15345511.jpg" width="468" /></p>

<p><strong>14. BarackSlideshow </strong></p>

<p><a href="http://devthought.com/projects/mootools/barackslideshow/">官方网站 </a>| <a href="http://devthought.com/wp-content/projects/mootools/barackslideshow/Demo/">演示</a></p>

<p>一个灰常小巧和轻量的幻灯脚本，灵感来自于美国总统Baracka Obama网站的一个幻灯效果。该脚本获取MorphList的能力，并增强图片的可视化和导航。</p>

<p><img height="219" alt="BarackSlideshow" src="http://www.chinaz.com/upimg/allimg/100323/15345512.jpg" width="468" /></p>

<p><strong>15. 使用JQuery s3Slider的wordpress模板</strong></p>

<p><a href="http://www.tobacamp.com/tutorial/creating-featured-slider-in-wordpress-theme-using-jquery-s3slider/">官方网站</a> | <a href="http://www.serie3.info/s3slider/demonstration.html">演示</a></p>

<p>在WP中使用JQuery s3Slider插件来创建幻灯内容。</p>

<p><img height="299" alt="Wordpress Theme using JQuery s3Slider" src="http://www.chinaz.com/upimg/allimg/100323/15345513.jpg" width="468" /></p>

<p>其实，jQuery的幻灯插件并不只这些，还有CodaSlider、JQuery Cycle Plugin等，当然有些只只能用在图片的，而大部分是可用于内容的。</p>