本文实例讲述了jQuery实现时尚漂亮的幻灯片特效，基本能满足你在网页上使用幻灯片（焦点图)效果。分享给大家供大家参考。具体如下：

幻灯片效果描述：用鼠标点击右下角数字按钮幻灯片进行左右切换进行切换。运行效果截图如下：

具体实现代码：

headtitleJquery幻灯片焦点图插件/title脚本src=' http : js/jquery-1.4 a2。量滴js ' type=' text/JavaScript '/script script src=' http : js/jquery .-1 .2 .1 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){ $(' # Kinslideshow ')).KinSlideshow()；})/scriptstyle type='text/css ' .代码{ height : autopadding :20 pxborder :1 px固体# 9EC9FE背景# ECF3FD}。代码pre { font-family : ' Courier New '；font-size :14 px}.信息{ font-size :12 pxcolor : # 666666 font-family : verdana；余量余量：20px 0 50px 0}。信息p {边际：0划水：0;线高：22 px文本-缩进：40像素；} h2.title { margin:0划水：0;页边距-顶部：50像素；font-size :18 px字体系列： '微软雅黑维尔达纳；} H3。title { font-size :16 px字体系列： '微软雅黑维尔达纳；}.importInfo { font-family : verdana；font-size :14 px}/style/headlydyliha href=' index。' html '默认设置效果/a/Li/ol div id=' Kinslideshow ' style='隐藏可见性：'a target=' _ blank ' img src=' http : images/22。png ' alt=' Jquery '幻灯片焦点图插件width=' 600 ' height=' 300 '/a a target=' _ blank ' img src=' http : images/23。png ' alt=' Jquery '幻灯片焦点图插件width=' 600 ' height=' 300 '/a a target=' _ blank ' img src=' http : images/4。jpg ' alt=' Jquery '幻灯片焦点图插件width=' 600 ' height=' 300 '/a a target=' _ blank ' img src=' http : images/5。jpg ' alt=' Jquery '幻灯片焦点图插件width=' 600 ' height=' 300 '/a a target=' _ blank ' img src=' http : images/11。png ' alt=' Jquery '幻灯片焦点图插件宽度='600 '高度=' 300 '/a/div/body/html附：所有参数列表

Intervalstime:5，//将间隔时间设置为5秒[单位：秒][默认为5秒]moveSpeedTime:400 //切换图片所需的时间，[单位：毫秒][默认为400毫秒] ]moveStyle: '左'，//切换方向：[左|右|上|下left:切换到左，right:切换到右，up:切换到上，down:切换到下[默认切换到鼠标滑过开关。【默认值是点击按钮切换】iShastitlebar: True。//是否显示标题背景可选：[True | False][默认值为True]title bar : { title bar _ Height 336040，Titlebar _ BGColor3360' # 00000 '，TitleBar_alpha:0.5}，//标题背景样式，(在isHasTitleBar=true的前提下启用)title bar _ Height :40-标题背景高度。[默认值：40]标题栏_ bgcolor : ' # 000000 '-标题背景色。[默认值：# 000000]标题栏_ alpha :0.5-标题背景透明度，值[0~1]。[默认值：0.5] ishastitlefont: true。//是否显示标题文本可以选择为[true | false][默认值为true]title font 3360 { title font _ size :12，titlefont _ color3360' # ffffff '。Titlefont _ family:' verdana '，titlefont _ weight:' bold'}，//标题文本样式，(如果isHasTitleFont=true，则启用)title font _ size-标题文本的大小(以像素为单位)。[默认值：12]Title font _ color : ' # ffffff '-标题文本颜色。[默认值：# 000000]title font _ family : ' verdana '-标题文本字体。[默认值：verdana]title font _ weight : ' bold '-标题文本粗细。可选值：[粗体| normal][默认：' bold']，normal为正常，不加粗。Ishasbtn3360 true，//是否显示按钮Btn : { BTN _ bgcolor 3360 ' # 66666 '、BTN _ bghover color:' # cc0000 '、BTN _ font color 3360 ' # cccccc '、BTN _ font hover color : ' # 000000 '、btn _ fontFamily: ' Verdana '、btn _ borderColor: ' # 999999 '、Btn _BTN _ bghover color : ' # cc 0000 '-按钮滑过/点击背景色[默认：' #CC0000']。BTN _ font color : ' # CCCCCC '-按钮文本颜色[默认：' #CCCCCC']。BTN _ font over varcolor : ' # 000000 '-按钮滑动/单击按钮文本颜色[默认值：' #000000']。Btn_fontFamily:'Verdana '，-button文本字体[默认：' Verdana']。BTN _ bordercolor : ' # 999999 '-按钮边框颜色[默认：' # 99999']。BTN _ borderserver color : ' # ff 0000 '-按钮滑动/单击按钮边框颜色[默认：' #FF0000']。BTN _ borderwidth :1-按钮边框宽度，单位像素不能超过3[默认：1]。BTN _ bgalpha :0.7-按钮透明度，值[0 ~ 1][默认值：0.7]。希望这篇文章对大家的Jquery特效设计有所帮助。