网页内容切换效果实现的15个jQuery插件

2016-02-20 00:55 6 1 收藏

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐网页内容切换效果实现的15个jQuery插件,无聊中的都看过来。

【 tulaoshi.com - Web开发 】

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

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

1. jFlow

官方网站 | 演示

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

jFlow

2. 使用jQuery UI实现推荐内容的幻灯展示

官方网站 演示

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

Create Featured Content Slider Using jQuery UI

3. 创建漂亮的jQuery幻灯教程

官方网站 | 演示

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

Create Beautiful jQuery sliders tutorial

4. 基于jQuery的一个简单的内容幻灯效果

官方网站 | 演示

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

A Basic Content Slider With jQuery

5. JC Play List

官方网站 | 演示

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

JC Play List

6. Easy Slider

官方网站 | 演示

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

Easy Slider

7.jqGalScroll

官方网站

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

 jqGalScroll

8. Image Gallery

官方网站

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

Image Gallery

9.使用jQuery UI 制作内容幻灯

官方网站 | 演示

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

Dan Wellman为NetTuts写的教程,很详细。

Making a Content Slider with jQuery UI

10. 创建一个自动播放的推荐内容幻灯

官方网站 | 演示

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

Creating a Slick Auto-Playing Featured Content Slider

11. slideViewer

官方网站

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

slideViewer

12. Start/Stop Slider

官方网站 | 演示

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

Start/Stop Slider

13. 一个简约的jQuery插件

官方网站 | 演示

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

A Minimalist jQuery Plugin

14. BarackSlideshow

官方网站 | 演示

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

BarackSlideshow

15. 使用JQuery s3Slider的wordpress模板

官方网站 | 演示

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

Wordpress Theme using JQuery s3Slider

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

来源:http://www.tulaoshi.com/n/20160220/1632854.html

延伸阅读
有经验的网页设计师和前端都知道,在开始着手设计网页之前,通常大家会在白板或者草稿纸上画个草图,这样做方便构思整体布局。虽然许多设计师选择在白板上完成这一过程,不过也有许多设计师选择使用软件来打草稿,其中最受大家青睐的就包括Sketch 内置的模板功能。 相比白板上的手绘模板,Sketch内置的模板功能更加规整,也组织得更加富有条理...
标签: Web开发
什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。 怎么实现ImageLazyLoad 一、使用JQuery...
标签: Web开发
在网络发展领域,由于 jQuery 简单易学,易于使用和易于扩展的特点,因此正慢慢变得无处不在。以下是从一些 jQuery 相关文章中整理出来的 30+ 新鲜与惊奇的 jQuery 插件与教程。如果你正在寻找最新的 jQuery 信息,这些内容值得一读。 教程 1. 在图像画廊载入过程中使用 jQuery 预加载技术。 | 2. 创建一个独特的熔岩灯动画效果的 j...
标签: Web开发
打包下载 查了一下jq的官方插件编写文档( http://docs.jquery.com/Plugins/Authoring )以及文档中推荐的Mike Alsup写的一篇 A Plugin Development Pattern 。英语不是很好,但还是努力看下来(既学习到知识又能练习英语,何乐不为),照猫画虎的写了一个处女作——tabBox。 顾名思义,这个插件就是方便的产生具有tab选项卡功能“盒子...
标签: Web开发
直接看代码: 代码如下: %@ Page Language="C#" AutoEventWireup="true" CodeFile="Layer.aspx.cs" Inherits="Layer" % !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head runat="server" title/title scri...

经验教程

660

收藏

66
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部