Jquery幻灯片特效代码分享-鼠标滑过按钮时切换(2)

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

幻灯片效果描述：用鼠标滑过右下角数字按钮幻灯片进行左右切换进行切换。

自定义切换参数效果：向下切换、切换时间为8秒、鼠标滑过按钮时切换运行效果截图如下：

具体代码如下

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({ move style : ' down '，intervalTime:8，mouseEvent:'mouseover '，title font : { title font _ size :14，title font _ color : ' # ff 0000 ' })；})/scriptstyle type='text/css ' .代码{ height : autopadding :20 pxborder :1 px固体# 9EC9FE背景# ECF3FD}。代码pre { font-family : ' Courier New '；font-size :14 px}.代码前置代码。注意{ color : # 999 }。代码2 {边框：1 px实心# FEB0B 0；background : # fff1 f1 margin-top :10 px；} .代码2 pre { margin-left :20 px；font-size :12 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字体系列： '微软雅黑维尔达纳；} H2。标题跨度。标题信息{ font-size :12 px颜色： # 333边距-左侧：10 pxfont-family : verdana} H3。title { font-size :16 px字体系列： '微软雅黑维尔达纳；}.importInfo { font-family : verdana；font-size :14 px}/style/head dylih 3a href=' demo 2。' html '自定义切换参数效果/a/Li/ol div id=' Kinslideshow ' style='隐藏可见性：'a target=' _ blank ' img src=' http : images/11。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/22。png ' 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/4。jpg ' alt=' Jquery '幻灯片焦点图插件宽度='600 '高度=' 300 '/a/div/body/html希望本文所述对大家的Jquery特效设计有所帮助。