jquery幻灯插件,jquery弹窗插件

Jquery幻灯片特效代码分享--打开页面随机选择切换方式（3）

这篇文章主要介绍了jQuery实现幻灯片焦点图，可实现非常炫目时尚的幻灯片效果，非常具有实用价值，基本能满足你在网页上使用幻灯片(焦点图)效果，需要的朋友可以参考下

网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了东洲免费建站欢迎大家使用！

幻灯片效果描述：与前两节不同的是，这款特效可以打开页面随机选择切换方式（方向）

运行效果截图如下：

具体代码如下

head

meta

http-equiv="Content-Type"

content="text/html;

charset=gb2312"

/

titleJquery幻灯片焦点图插件/title

script

src="js/jquery-1.4a2.min.js"

type="text/javascript"/script

script

src="js/jquery.-1.2.1.min.js"

type="text/javascript"/script

script

type="text/javascript"

//打开页面随机选择

切换方式（方向）,怕增大KinSlideshow.js文件

就没把随机切换写到里面。

//使用时如有需要随机自己写在前面是一样的。而且还可以只固定随机切换哪几种。

var

moveStyle

var

rand

=parseInt(Math.random()*4)

switch(rand){

case

0:

moveStyle="left"

;break;

case

1:

moveStyle="right"

;break;

case

2:

moveStyle="down"

;break;

case

3:

moveStyle="up"

;break;

}

$(function(){

$("#KinSlideshow1").KinSlideshow({moveStyle:moveStyle});

})

/script

style

type="text/css"

#KinSlideshow{

overflow:hidden;

width:600px;

height:300px;}

/style

/head

body

h2打开页面随机选择切换方式（方向）---刷新看看

^_^/h2

div

id="KinSlideshow1"

style="visibility:hidden;"

a

target="_blank"img

src="images/11.png"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

a

target="_blank"img

src="images/23.png"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

a

target="_blank"img

src="images/4.jpg"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

a

target="_blank"img

src="images/5.jpg"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

a

target="_blank"img

src="images/22.png"

alt="Jquery幻灯片焦点图插件"

width="600"

height="300"

//a

/div

/body

/html

希望本文所述对大家的Jquery特效设计有所帮助。

Slick.js使用方法（响应式轮播插件）

简介

slick 是一个基于 jQuery 的响应触摸式幻灯片插件，支持IE8+，Chrome, Firefox, and Safari，具有以下特点：

支持响应式

浏览器支持 CSS3 时，则使用 CSS3 过度/动画

支持移动设备滑动

支持桌面浏览器鼠标拖动

支持循环

支持左右控制

支持动态添加、删除、过滤

支持自动播放、圆点、箭头、回调等等

兼容

浏览器兼容：兼容 IE7+ 及其他主流浏览器，若要兼容 IE7，需修改 CSS（slick.css）。

jQuery兼容：兼容 1.7 及以上版本。

使用方法

1、引入文件

link rel="stylesheet" href="style/slick.css"

script src="script/jquery.min.js"/script

script src="script/slick.min.js"/script

注意：需jQuery 1.7 +

2、HTML

div class="slick"

 diva href=""img src="images/1.jpg" alt=""/a/div

 diva href=""img src="images/2.jpg" alt=""/a/div

 diva href=""img src="images/4.jpg" alt=""/a/div

 diva href=""img src="images/3.jpg" alt=""/a/div

/div

3、JavaScript

$(function(){

 $('.slick').slick({

     dots: true

  });

});

参数

参数类型默认值说明

accessibility布尔值true启用Tab键和箭头键导航

autoplay布尔值false自动播放

autoplaySpeed整数3000自动播放间隔

centerMode布尔值false中心模式

centerPadding字符串’50px’中心模式左右内边距

cssEase字符串‘ease’CSS3 动画

customPagingfunctionn/a自定义分页

dots布尔值false指示点

draggable布尔值true启用桌面拖动

easing字符串‘linear’animate() fallback easing

fade布尔值false淡入淡出

arrows布尔值true左右箭头

infinite布尔值true循环播放

lazyLoad字符串‘ondemand’延迟加载，可选 ondemand 和 progressive

onBeforeChange(this, index)methodnull开始切换前的回调函数

onAfterChange(this, index)methodnull切换后的回调函数

onInit(this)methodnull第一次初始化后的回调函数

onReInit(this)methodnull再次初始化后的回调函数

pauseOnHover布尔值true鼠标悬停暂停自动播放

responsiveobjectnull断点触发设置

slide字符串‘div’滑动元素查询

slidesToShow整数1幻灯片每屏显示个数

slidesToScroll整数1幻灯片每次滑动个数

speed整数300滑动时间

swipe布尔值true移动设备滑动事件

touchMove布尔值true触摸滑动

touchThreshold整数5滑动切换阈值，即滑动多少像素后切换

useCSS布尔值true使用 CSS3 过度

vertical布尔值false垂直方向

方法

方法Argument说明

slick()options : object初始化 slick

unslick() 销毁 slick

slickNext() 切换下一张

slickPrev() 切换上一张

slickPause() 暂停自动播放

slickPlay() 开始自动播放

slickGoTo()index : int切换到第 x 张

slickCurrentSlide() 返回当前幻灯片索引

slickAdd()element : html or DOM object, index: int, addBefore: boolAdd a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String

slideRemove()index: int, removeBefore: boolRemove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.

slickFilter()filter : selector or functionFilters slides using jQuery .filter syntax

slickUnfilter() Removes applied filter

slickSetOption(option,value,refresh)option : string(option name), value : depends on option, refresh : 布尔值Sets an option live. Set refresh to true if it is an option that changes the display

jquery分页插件哪个比较好？

maxentries    总条目数    必选参数，整数  

items_per_page    每页显示的条目数    可选参数，默认是10  

num_display_entries    连续分页主体部分显示的分页条目数    可选参数，默认是10  

current_page    当前选中的页面    可选参数，默认是0，表示第1页  

num_edge_entries    两侧显示的首尾分页的条目数    可选参数，默认是0  

link_to    分页的链接    字符串，可选参数，默认是"#"  

prev_text    “前一页”分页按钮上显示的文字    字符串参数，可选，默认是"Prev"  

next_text    “下一页”分页按钮上显示的文字    字符串参数，可选，默认是"Next"  

ellipse_text    省略的页数用什么文字表示    可选字符串参数，默认是"..."  

prev_show_always    是否显示“前一页”分页按钮    布尔型，可选参数，默认为true，即显示“前一页”按钮  

next_show_always    是否显示“下一页”分页按钮    布尔型，可选参数，默认为true，即显示“下一页”按钮  

callback    回调函数    默认无执行效果  

首先这些都不叫插件，叫JavaScript框架，也叫Jquery类库，是所有Jquery插件（有很多，Jquery幻灯啊，Jquery导航啊，请百度）的基础，就是你要用Jquery插件就要导入jquery-1.4.2.js这些query-1.4.2.js里面有注释的教你怎么用的，数字是版本号jquery-1.6.4.min.js

带min是压缩后的，可以挂网页上得，用于减少加载。

jquery正规命名规范

jquery -版本号

.min压缩版

不带.min就是未压缩版

jquery-1.6.4.min.js

一般使用都用带.min的

节省加载时间。

其他的都是基于

jquery做的开发，命名各不相同，但都依赖于jquery

jquery有哪些插件？

//200多个插件如下 实际开发中 请选择合适的使用

1：文件上传类jQuery插件

Ajax File Upload.

jQUploader.

Multiple File Upload plugin.

jQuery File Style.

Styling an input type file.

Progress Bar Plugin.

2：表单验证类jQuery插件

jQuery Validation.

Auto Help.

Simple jQuery form validation.

jQuery XAV – form validations.

jQuery AlphaNumeric.

Masked Input.

TypeWatch Plugin.

Text limiter for form fields.

Ajax Username Check with jQuery.

3:表单选择框类jQuery插件

jQuery Combobox.

jQuery controlled dependent (or Cascadign) Select List.

Multiple Selects.

Select box manipulation.

Select Combo Plugin.

jQuery – LinkedSelect

Auto-populate multiple select boxes.

Choose Plugin (Select Replacement).

4:表单基本、输入框、选择框等jQuery插件

jQuery Form Plugin.

jQuery-Form.

jLook Nice Forms.

jNice.

Ping Plugin.

Toggle Form Text.

ToggleVal.

jQuery Field Plugin.

jQuery Form’n Field plugin.

jQuery Checkbox manipulation.

jTagging.

jQuery labelcheck.

Overlabel.

3 state radio buttons.

ShiftCheckbox jQuery Plugin.

Watermark Input.

jQuery Checkbox (checkboxes with imags).

jQuery SpinButton Control.

jQuery Ajax Form Builder.

jQuery Focus Fields.

jQuery Time Entry.

5:时间、日期和颜色选取类jQuery插件

jQuery UI Datepicker.

jQuery date picker plugin.

jQuery Time Picker.

Time Picker.

ClickPick.

TimePicker.

Farbtastic jQuery Color Picker Plugin.

Color Picker by intelliance.fr.

6:投票类jQuery插件

jQuery Star Rating Plugin.

jQuery Star Rater.

Content rater with asp.net, ajax and jQuery.

Half-Star Rating Plugin.

7:搜索类jQuery插件

jQuery Suggest.

jQuery Autocomplete.

jQuery Autocomplete Mod.

jQuery Autocomplete by AjaxDaddy.

jQuery Autocomplete Plugin with HTML formatting.

jQuery Autocompleter.

AutoCompleter (Tutorial with PHPMySQL).

quick Search jQuery Plugin.

8:jQuery编辑器插件

jTagEditor.

WYMeditor.

jQuery jFrame.

Jeditable – edit in place plugin for jQuery.

jQuery editable.

jQuery Disable Text Select Plugin.

Edit in Place with Ajax using jQuery.

jQuery Plugin – Another In-Place Editor.

TableEditor.

tEditable – in place table editing for jQuery.

9:多媒体、视频、Flash等类jQuery插件

jMedia – accessible multi-media embedding.

JBEdit – Ajax online Video Editor.

jQuery MP3 Plugin.

jQuery Media Plugin.

jQuery Flash Plugin.

Embed QuickTime.

SVG Integration.

图片类jQuery插件

ThickBox.

jQuery lightBox plugin.

jQuery Image Strip.

jQuery slideViewer.

jQuery jqGalScroll 2.0.

jQuery – jqGalViewII.

jQuery – jqGalViewIII.

jQuery Photo Slider.

jQuery Thumbs – easily create thumbnails.

jQuery jQIR Image Replacement.

jCarousel Lite.

jQPanView.

jCarousel.

Interface Imagebox.

Image Gallery using jQuery, Interface  Reflactions.

simple jQuery Gallery.

jQuery Gallery Module.

EO Gallery.

jQuery ScrollShow.

jQuery Cycle Plugin.

jQuery Flickr.

jQuery Lazy Load Images Plugin.

Zoomi – Zoomable Thumbnails.

jQuery Crop – crop any image on the fly.

Image Reflection.

10:Google地图类jQuery插件应用

jQuery Plugin googlemaps.

jMaps jQuery Maps Framework.

jQmaps.

jQuery  Google Maps.

jQuery Maps Interface forr Google and Yahoo maps.

jQuery J Maps – by Tane Piper.

11:游戏类jQuery插件

Tetris with jQuery.

jQuery Chess.

Mad Libs Word Game.

jQuery Puzzle.

jQuery Solar System (not a game but awesome jQuery Stuff).

12:表格,网格类jQuery插件

UI/Tablesorter.

jQuery ingrid.

jQuery Grid Plugin.

Table Filter – awesome!.

TableEditor.

jQuery Tree Tables.

Expandable “Detail” Table Rows.

Sortable Table ColdFusion Costum Tag with jQuery UI.

jQuery Bubble.

TableSorter.

Scrollable HTML Table.

jQuery column Manager Plugin.

jQuery tableHover Plugin.

jQuery columnHover Plugin.

jQuery Grid.

TableSorter plugin for jQuery.

tEditable – in place table editing for jQuery.

jQuery charToTable Plugin.

jQuery Grid Column Sizing.

jQuery Grid Row Sizing.

13:统计类jQuery插件

jQuery Wizard Plugin .

jQuery Chart Plugin.

Bar Chart.

14:边框、圆角、背景类jQuery插件

jQuery Corner.

jQuery Curvy Corner.

Nifty jQuery Corner.

Transparent Corners.

jQuery Corner Gallery.

Gradient Plugin.

14:文字和超链接类jQuery插件

jQuery Spoiler plugin.

Text Highlighting.

Disable Text Select Plugin.

jQuery Newsticker.

Auto line-height Plugin.

Textgrad – a text gradient plugin.

LinkLook – a link thumbnail preview.

pager jQuery Plugin.

shortKeys jQuery Plugin.

jQuery Biggerlink.

jQuery Ajax Link Checker.

15:文本提示类jQuery插件

jQuery Plugin – Tooltip.

jTip – The jQuery Tool Tip.

clueTip.

BetterTip.

Flash Tooltips using jQuery.

ToolTip.

16:菜单和导航类jQuery插件

jQuery Tabs Plugin – awesome! . [demo nested tabs.]

another jQuery nested Tab Set example (based on jQuery Tabs Plugin).

jQuery idTabs.

jdMenu – Hierarchical Menu Plugin for jQuery.

jQuery SuckerFish Style.

jQuery Plugin Treeview.

treeView Basic.

FastFind Menu.

Sliding Menu.

Lava Lamp jQuery Menu.

jQuery iconDock.

jVariations Control Panel.

ContextMenu plugin.

clickMenu.

CSS Dock Menu.

jQuery Pop-up Menu Tutorial.

Sliding Menu.

17:幻灯片、手风琴特效类jQuery插件

jQuery Plugin Accordion.

jQuery Accordion Plugin Horizontal Way.

haccordion – a simple horizontal accordion plugin for jQuery.

Horizontal Accordion by portalzine.de.

HoverAccordion.

Accordion Example from fmarcia.info.

jQuery Accordion Example.

jQuery Demo – Expandable Sidebar Menu.

Sliding Panels for jQuery.

jQuery ToggleElements.

Coda Slider.

jCarousel.

Accesible News Slider Plugin.

Showing and Hiding code Examples.

jQuery Easing Plugin.

jQuery Portlets.

AutoScroll.

Innerfade.

18:拖放类jQuery插件

UI/Draggables.

EasyDrag jQuery Plugin.

jQuery Portlets.

jqDnR – drag, drop resize.

Drag Demos.

19:XML XSL JSON Feeds相关jQuery插件

XSLT Plugin.

jQuery Ajax call and result XML parsing.

xmlObjectifier – Converts XML DOM to JSON.

jQuery XSL Transform.

jQuery Taconite – multiple Dom updates.

RSS/ATOM Feed Parser Plugin.

jQuery Google Feed Plugin.

20:浏览器

Wresize – IE Resize event Fix Plugin.

jQuery ifixpng.

jQuery pngFix.

Link Scrubber – removes the dotted line onfocus from links.

jQuery Perciformes – the entire suckerfish familly under one roof.

Background Iframe.

QinIE – for proper display of Q tags in IE.

jQuery Accessibility Plugin.

jQuery MouseWheel Plugin.

21:警告, 提示, 确认等对话框

jQuery Impromptu.

jQuery Confirm Plugin.

jqModal.

SimpleModal.

CSS

jQuery Style Switcher.

JSS – Javascript StyleSheets.

jQuery Rule – creation/manipulation of CSS Rules.

jPrintArea.

22:DOM、AJAX和其它JQuery插件

FlyDOM.

jQuery Dimenion Plugin.

jQuery Loggin.

Metadata – extract metadata from classes, attributes, elements.

Super-tiny Client-Side Include Javascript jQuery Plugin.

Undo Made Easy with Ajax.

JHeartbeat – periodically poll the server.

Lazy Load Plugin.

Live Query.

jQuery Timers.

jQuery Share it – display social bookmarking icons.

jQuery serverCookieJar.

jQuery autoSave.

jQuery Puffer.

jQuery iFrame Plugin.

Cookie Plugin for jQuery.

jQuery Spy – awesome plugin.

Effect Delay Trick.

jQuick – a quick tag creator for jQuery..

40款经典前端特效插件---分享

1.flavr—超级漂亮的jQuery扁平弹出对话框     

2.轻量级触摸响应滑块插件JQuery lightSlider      

3.带37种3D动画特效的跨浏览器CSS3动画框架       

4.jquery整屏滚动插件Scrollify        

5.jquery旋转木马插件SLICK         

6.jquery文字动画插件LetterFX          

7.jquery文本翻转插件Wodry.js       

8.jquery通知插件toastr       

9.jQuery滚动执行动画插件FadeThis      

10.jquery表单验证插件Bootstrap Validator       

11.jCountdown倒计时插件jQuery           

12.iCheck不一样的checkbok         

13.Owl Carousel强大的响应式jQuery焦点图轮播插件   

14.magic-带64种动画效果的CSS3动画库     

15.jQuery实时搜索插件-HideSeek       

16.bootstrap modal对话框             

17.一款模拟CSS3动画的js插件-move.js              

18.可替代CSS3 transition和transform的jQuery插件          

19.基于bootstrap的jQuery多功能模态对话框插件

20.带CSS3过渡效果的js模态窗口插件        

21.支持移动触摸设备的简洁js幻灯片插件

22.jQuery轻量级响应式扁平风格tabs选项卡插件

23.jQuery轻量级响应式Tooltip插件

24.jQuery简单且功能强大的图片剪裁插件

25.带CSS3动画过渡效果的jQuery模态窗口插件

26.中国省市区地址三级联动jQuery插件

27.移动端优先且支持jQuery和Zepto的模态对话框插件

28.jQuery简单实用的tooltip插件

29.带CSS3过渡动画效果的jQuery Tabs选项卡插件

30.x0popup-纯js弹出对话框插件

31.WOW.js-元素在页面滚动时展示CSS3动画JS插件

32.Windows8样式的消息提示框jQuery插件

33.jQuery星级评分插件

34.fsBanner-实用的网站响应式Banner手风琴插件

35.draggabilly-功能强大的拖动拖拽元素插件

36.验证插件vali.js

37.响应式jQuery图片放大镜插件magnificent.js

38.可快速生成各种阴影效果的jQuery插件

39.基于jquery的非常逼真的全屏下雪效果

40.纯文本Loading加载指示器特效

实例代码详解jquery.slides.js

Slides

–

是一个简单的，容易定制和风格化，的jQuery幻灯片插件。

Slides提供褪色或幻灯片过渡效果，图像淡入淡出，图像预压，自动生成分页，循环，自动播放的自定义等很多选项。

用Slides插件，你可以随机播放幻灯片，设定那一套您想要开始幻灯片。它附带充分的说明和示例。

废话不多说了，直接给大家贴代码了

$(function(){

$("#slides").slidesjs({

play:

{

active:

true,

//

[boolean]

Generate

the

play

and

stop

buttons.

//

You

cannot

use

your

own

buttons.

Sorry.

effect:

"slide",

//

[string]

Can

be

either

"slide"

or

"fade".

interval:

,

//

[number]

Time

spent

on

each

slide

in

milliseconds.

auto:

false,

//

[boolean]

Start

playing

the

slideshow

on

load.

swap:

true,

//

[boolean]

show/hide

stop

and

play

buttons

pauseOnHover:

false,

//

[boolean]

pause

a

playing

slideshow

on

hover

restartDelay:

//

[number]

restart

delay

on

inactive

slideshow

}

});

});

前台：

!doctype

html

head

style

/*

Prevents

slides

from

flashing

*/

#slides

{

display:none;

}

/style

script

src=""/script

script

src="jquery.slides.min.js"/script

script

$(function(){

$("#slides").slidesjs({

width:

,

height:

});

});

/script

/head

body

div

id="slides"

img

src=""

img

src=""

img

src=""

img

src=""

img

src=""

/div

/body

以上内容是关于jquery.slides.js的全部代码，希望大家喜欢。