40个有创意的jQuery图片和内容滑动及弹出插件收藏集之四
webphp 12年前
在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片，并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascript框架之一。以其语法简单灵活而大受Web designer欢迎。所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件，我们可以很简单地直接将这些图片滑动插件嵌入到网页中，很容易就得到了即酷又实用的jQuery图片滑动效果。 <h2>31 Supersized 3.2 - 全屏图片滑动切换jQuery插件</h2> <p>(<a href="/misc/goto?guid=4958324725740189211" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958201085384655479" target="_blank">Download下载</a>)</p> <p>你可以使用这个照片滑动切换插件制作出很酷的全屏照片展示效果。</p> <p class="img-middle"><img alt="jQuery图片滑动切换插件 - Supersized 3.2" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2011/12/jquerysliders32.jpg" /><br /> jQuery图片滑动切换插件 - Supersized 3.2</p> <h2>32 Flip Box</h2> <p>(<a href="/misc/goto?guid=4958199731371935717" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958199731371935717" target="_blank">Download下载</a>)</p> <p>Flip Box顾名思义可以给图片切换展示实现向上、向下、向左和向右的弹性滑动效果。</p> <p class="img-middle"><img alt="jQuery图片滑动切换插件 - Flip Box" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2011/12/jquerysliders34.jpg" /><br /> jQuery图片滑动切换插件 - Flip Box</p> <h2>33 Innovation Slide</h2> <p>(<a href="/misc/goto?guid=4958324728865371074" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958324729668835538" target="_blank">Download下载</a>)</p> <p>你可以使用Innovation Slide制作切牌、流牌动作的照片滑动切换效果。图片可以进行8个方向的切换，很有创意的一个jQuery图片滑动切换插件。</p> <p class="img-middle"><img alt="jQuery图片滑动切换插件 - Innovation Slide" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2011/12/jquerysliders35.jpg" /><br /> jQuery图片滑动切换插件 - Innovation Slide</p> <h2>34 TN3 Gallery</h2> <p>(<a href="/misc/goto?guid=4958184838306715873" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958324731191365602" target="_blank">Download下载</a>)</p> <p>使用TN3 Gallery可以制作出超炫的图片集照片幻灯片切换效果。TN3 Gallery支持多种照片切换过渡效果。并支持XML和Flickr。</p> <p class="img-middle"><img alt="jQuery图片滑动切换插件 - TN3 Gallery" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2011/12/jquerysliders36.jpg" /><br /> jQuery图片滑动切换插件 - TN3 Gallery</p> <h2>35 Canvas照片过滤效果切换插件</h2> <p>(<a href="/misc/goto?guid=4958324731976684261" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958324732780160151" target="_blank">Download下载</a>)</p> <p>这是一个jQuery教程的Demo效果展示。它使用了HTML5的Canvas元素，在照片切换过渡时会有类似iPhone照相瞬间关闭镜头的效果。</p> <p class="img-middle"><img alt="jQuery图片滑动切换插件 - Canvas照片过滤效果切换插件" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2011/12/jquerysliders38.jpg" /><br /> jQuery图片滑动切换插件 - Canvas照片过滤效果切换插件</p> <h2>36 Photobooth和PHP,Jquery和CSS3照片插件</h2> <p>(<a href="/misc/goto?guid=4958324733570851995" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958324734379517353" target="_blank">Download下载</a>)</p> <p>这个插件的作用是访客可以使用其摄像头在网页上拍照，并将其上传到CSS3效果的界面。</p> <p class="img-middle"><img alt="jQuery图片滑动切换插件 -Photobooth和PHP,Jquery和CSS3照片插件" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2011/12/jquerysliders40.jpg" /><br /> jQuery图片滑动切换插件 - Photobooth和PHP,Jquery和CSS3照片插件</p> <h2>37 jqFlick - Flickr驱动的幻灯片插件</h2> <p>(<a href="/misc/goto?guid=4958324735167291494" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958324735962151207" target="_blank">Download下载</a>)</p> <p>这个插件支持通过Flickr的API读取照片，并制作漂亮的照片幻灯片展示的jQuery插件。</p> <p class="img-middle"><img alt="jQuery图片滑动切换插件 - Flickr驱动的幻灯片插件" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2011/12/jquerysliders41.jpg" /><br /> jQuery图片滑动切换插件 -</p> <p>Flickr驱动的幻灯片插件</p> <h2>38 HTML5 Slideshow</h2> <p>(<a href="/misc/goto?guid=4958324736752047963" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958324737554548698" target="_blank">Download下载</a>)</p> <p>这是一个非常漂亮的HTML5效果的照片滑动切换插件。</p> <p class="img-middle"><img alt="jQuery图片滑动切换插件 - HTML5 Slideshow" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2011/12/jquerysliders42.jpg" /><br /> jQuery图片滑动切换插件 - HTML5 Slideshow</p> <h2>39 Slides</h2> <p>(<a href="/misc/goto?guid=4958324738335232752" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958324739144598476" target="_blank">Download下载</a>)</p> <p class="img-middle"><img alt="jQuery图片滑动切换插件 -Slides" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2011/12/jquerysliders44.jpg" /><br /> jQuery图片滑动切换插件 - Slides</p> <h2>40 Slidy</h2> <p>(<a href="/misc/goto?guid=4958324739938800109" target="_blank">Demo</a>演示 | <a href="/misc/goto?guid=4958324740728049973" target="_blank">Download下载</a>)</p> <p>Slidy是一个制作图片滑动切换的jQuery教程。初学者可以参考学习如何制作一个图片滑动插件。</p> <p class="img-middle"><img alt="jQuery图片滑动切换插件 - Slidy" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2011/12/jquerysliders45.jpg" /><br /> jQuery图片滑动切换插件 - Slidy</p> <p class="img-middle"> </p> <p class="img-middle">文章来源：<a href="/misc/goto?guid=4958323428813632141">http://www.techolics.com</a></p>