jQuery实现生成幻灯片插件使用详解-jquery-网页制作-壹聚教程网jQuery实现生成幻灯片插件使用详解昨天由于工作问题要写了一个幻灯片效果，第一选择当然是jquery了，下面我把我利用jquery幻灯片插件实现的一个实例分享给各位朋友大家可参考。 KinSlideshow，是一款jQuery片插件，能够快速的帮忙我们实现网页上幻灯片的切换效果，兼容IE6/IE7/IE8/IE9,FireFox,Chrome,Opera。
　如果在chrome上使用的时候，必须要在在img标签中写上图片的宽度和高度，其他浏览器不需要，负责兼容性不好。使用极其方便、简单，外观样式可以自定义,具体定义样式方法和设置其他参数请参见官方的demo文件，不需要自己定义焦点图宽度和高度，自动读取图片宽和高，所有图片尺寸要保持一致。所有宽度和高度单位都是像素，设置参数时不需要加单位(px)。
外层div建议加上一句样式：style=&visibility:&
不加此句在IE下页面刚加载的瞬间时候会看到所有图片原始样子
这是因为KinSlideshow 要等页面加载完成才能解析页面中要设置成焦点图的HTML
虽然只有不到0.01秒的瞬间但用户体验不太好，所以建议加上。不加对程序也没影响！
想要兼容Chrome需要在img标签中写上图片的实际宽度和高度,其他浏览器不需要。
JQuery的KinSlideshow插件打造超炫焦点图,带参数说明
&!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&&&
&&& &title&JQuery的KinSlideshow插件打造超炫焦点图,带参数说明&/title&&
&&& &script language=&& type=&text/javascript& src=&/Scripts/-1.4.4.min.js&&&/script&&
&&& &script src=&/Scripts/jquery.KinSlideshow-1.2.1.min.js& type=&text/javascript&&&/script&&
&&& &script type=&text/javascript&&&
&&&&&&& var moveStyle&
&&&&&&& var rand = parseInt(Math.random() * 4)&
&&&&&&& switch (rand) {&
&&&&&&&&&&& case 0: moveStyle = &left&;&
&&&&&&&&&&& case 1: moveStyle = &right&;&
&&&&&&&&&&& case 2: moveStyle = &down&;&
&&&&&&&&&&& case 3: moveStyle = &up&;&
&&&&&&& }&
&&&&&&& $(function () {&
&&&&&&&&&&& $(&#KinSlideshow1&).KinSlideshow({ moveStyle: moveStyle });&
&&&&&&& })&
&&&&&&& /**&
&&&&&&& * jQuery KinSlideshow plugin&
&&&&&&& intervalTime:5,&&&&&&&& //设置间隔时间为5秒 【单位：秒】 [默认为5秒]&
&&&&&&& moveSpeedTime:400&&&&&& //切换一张图片所需时间，【单位：毫秒】[默认为400毫秒]&
&&&&&&& moveStyle:&left&,&&&&&& //切换方向 可选值：【 left | right | up | down 】left:向左切换,right:向右切换,up:向上切换,down:向下切换 [默认向左切换]&
&&&&&&& mouseEvent:&mouseclick&,&&& //鼠标操作按钮事件,可选值：【mouseclick | mouver】mouseclick：鼠标单击切换。mouseover：鼠标滑过切换。[默认为鼠标点击按钮切换]&
&&&&&&& isHasTitleBar:true,&&&& //是否显示标题背景 可选值：【 true | false 】[默认为true]&
&&&&&&& titleBar:{titleBar_height:40,titleBar_bgColor:&#000000&,titleBar_alpha:0.5},//标题背景样式，(isHasTitleBar = true 前提下启用)&&&&&&&&&&&
&&&&&&& titleBar_height :40 - & 标题背景高度。[默认：40]&
&&&&&&& titleBar_bgColor:&#000000& - & 标题背景颜色。[默认：#000000]&
&&&&&&& titleBar_alpha:0.5 -& 标题背景透明度，取值【0~1】。[默认：0.5]&&&&&&
&&&&&&& isHasTitleFont:true,&&& //是否显示标题文字 可选值：【 true | false 】[默认为true]&&&&
&&&&&&& titleFont:{TitleFont_size:12,TitleFont_color:&#FFFFFF&,TitleFont_family:&Verdana&,TitleFont_weight:&bold&}, //标题文字样式，(isHasTitleFont = true 前提下启用)&&&&&&&&
&&&&&&&&&&
&&&&&&& TitleFont_size - & 标题文字大小 单位像素。[默认：12]&
&&&&&&& TitleFont_color:&#FFFFFF& - & 标题文字颜色。[默认：#000000]&
&&&&&&& TitleFont_family:&Verdana& -& 标题文字字体。[默认：Verdana]&&
&&&&&&& TitleFont_weight:&bold& -& 标题文字粗细。可选值：【 bold | normal 】[默认：&bold&]& ,normal 正常 不加粗。&&&
&&&&&&& isHasBtn:true, //是否显示按钮&
&&&&&&& btn:{btn_bgColor:&#666666&,btn_bgHoverColor:&#CC0000&,&
&&&&&&& btn_fontColor:&#CCCCCC&,btn_fontHoverColor:&#000000&,btn_fontFamily:&Verdana&,&
&&&&&&& btn_borderColor:&#999999&,btn_borderHoverColor:&#FF0000&,&
&&&&&&& btn_borderWidth:1,btn_bgAlpha:0.7} //按钮样式设置，(isHasBtn = true 前提下启用)&&
&&&&&&& btn_bgColor:&#666666& -& 按钮背景颜色& [默认：&#666666&]。&
&&&&&&& btn_bgHoverColor:&#CC0000& -& 按钮滑过/点击 背景颜色& [默认：&#CC0000&]。&
&&&&&&& btn_fontColor:&#CCCCCC& -& 按钮文字颜色& [默认：&#CCCCCC&]。&
&&&&&&& btn_fontHoverColor:&#000000& -& 按钮滑过/点击 按钮文字颜色& [默认：&#000000&]。&
&&&&&&& btn_fontFamily:&Verdana&, -& 按钮文字字体& [默认：&Verdana&]。&
&&&&&&& btn_borderColor:&#999999& -& 按钮边框颜色& [默认：&#999999&]。&
&&&&&&& btn_borderHoverColor:&#FF0000& -& 按钮滑过/点击 按钮边框颜色& [默认：&#FF0000&]。&
&&&&&&& btn_borderWidth:1 -& 按钮边框宽度，单位像素 不能超过3& [默认：1]。&
&&&&&&& btn_bgAlpha:0.7 -& 按钮透明度 ，取值【0~1】 [默认：0.7]。&
&&&&&&& *&
&&&&&&& **/&
&&& &/script&&
&&& &style type=&text/css&&&
&&&&&&& #KinSlideshow{ overflow:width: 600height: 300 }&
&&& &/style&&
&&&&&&& 打开页面随机选择切换方式（方向）---刷新页面&/h2&&
&&& &div id=&KinSlideshow1& style=&visibility:&&&
&&&&&&& &a href=&& target=&_blank&&&img src=&/images/1.jpg& alt=&这是标题一& width=&600& height=&300& /&&/a&&
&&&&&&& &a href=&& target=&_blank&&&img src=&/images/2.jpg& alt=&这是标题二& width=&600& height=&300& /&&/a&&
&&&&&&& &a href=&& target=&_blank&&&img src=&/images/3.jpg& alt=&这是标题三& width=&600& height=&300& /&&/a&&
&&& &/div&&
上一页： &&&&&下一页：相关内容编辑推荐JQuery幻灯片焦点图插件代码 - IT技术畅销书 - 博客园
JQuery幻灯片焦点图插件兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件，功能很多 ，基本能满足你在网页上使用幻灯片(焦点图)效果。演示如下：
KinSlideshow默认设置效果代码:
javascript:
$(function(){
$(&#KinSlideshow&).KinSlideshow();
&div id=&KinSlideshow& style=&visibility:&&
&a href=&& target=&_blank&&&img src=&images/1.jpg& alt=&这是标题一& /&&/a&
&a href=&& target=&_blank&&&img src=&images/2.jpg& alt=&这是标题二& /&&/a&
&a href=&& target=&_blank&&&img src=&images/3.jpg& alt=&这是标题三& /&&/a&
&a href=&& target=&_blank&&&img src=&images/4.jpg& alt=&这是标题四& /&&/a&
&a href=&& target=&_blank&&&img src=&images/5.jpg& alt=&这是标题五& /&&/a&
&a href=&& target=&_blank&&&img src=&images/6.jpg& alt=&这是标题六& /&&/a&
随笔 - 234现在的位置:
Jquery幻灯片焦点图插件
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&meta name=&keywords& content=&JS代码,焦点图,JS广告代码,JS特效代码& /&
&meta name=&description& content=&此代码内容为Jquery幻灯片焦点图插件，属于站长常用代码，更多焦点图代码请访问懒人图库JS代码频道。& /&
&title&Jquery幻灯片焦点图插件_懒人图库&/title&
&script src=&/down/js/jiaodiantu-794/js/jquery-1.4a2.min.js& type=&text/javascript&&&/script&
&script src=&/down/js/jiaodiantu-794/js/jquery.KinSlideshow-1.2.1.min.js& type=&text/javascript&&&/script&
&script type=&text/javascript&&
$(function(){
$(&#KinSlideshow&).KinSlideshow();
&style type=&text/css&&
.code{ height: padding:20 border:1px solid #9EC9FE; background:#ECF3FD;}
.code pre{ font-family:&Courier New&;font-size:14}
.info{ font-size:12 color:#666666; font-family:V margin:20px 0 50px 0;}
.info p{ margin:0; padding:0; line-height:22 text-indent:40}
h2.title{ margin:0; padding:0; margin-top:50 font-size:18 font-family:&微软雅黑&,V}
h3.title{ font-size:16 font-family:&微软雅黑&,V}
.importInfo{ font-family:V font-size:14}
&h1 class=&title&&Jquery.KinSlideshow演示导航&/h1&
&li&&h3&&a href=&index.html&&默认设置效果&/a&&/h3&&/li&
&li&&h3&&a href=&demo2.html&&自定义切换参数效果&/a&&/h3&&/li&
&li&&h3&&a href=&demo3.html&&自定义外观参数效果&/a&&/h3&&/li&
&li&&h3&&a href=&demo4.html&&每次打开页面随机选择切换效果&/a&&/h3&&/li&
&div id=&KinSlideshow& style=&visibility:&&
&a href=&& target=&_blank&&&img src=&/down/js/jiaodiantu-794/images/1.jpg& alt=&这是标题一& width=&600& height=&300& /&&/a&
&a href=&& target=&_blank&&&img src=&/down/js/jiaodiantu-794/images/2.jpg& alt=&这是标题二& width=&600& height=&300& /&&/a&
&a href=&& target=&_blank&&&img src=&/down/js/jiaodiantu-794/images/3.jpg& alt=&这是标题三& width=&600& height=&300& /&&/a&
&a href=&& target=&_blank&&&img src=&/down/js/jiaodiantu-794/images/4.jpg& alt=&这是标题四& width=&600& height=&300& /&&/a&
&a href=&& target=&_blank&&&img src=&/down/js/jiaodiantu-794/images/5.jpg& alt=&这是标题五& width=&600& height=&300& /&&/a&
&a href=&& target=&_blank&&&img src=&/down/js/jiaodiantu-794/images/6.jpg& alt=&这是标题六& width=&600& height=&300& /&&/a&
&p&作者：Mr.kin　代码整理：&a href=&/& target=&_blank&&懒人图库&/a&　感谢：&a href=&/& target=&_blank&&你疯啦&/a&&/p&
&p&＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。&/p&
&p&&a href=&/js/d794.zip&&&img border=&0& src=&/images/js_freedown.gif& /&&/a&&/p&
&p&&p&兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件，功能很多 ，基本能满足你在网页上使用幻灯片(焦点图)效果。&/p&&/p&
&h2 class=&title&&KinSlideshow默认设置效果代码:&/h2&
&p class=&importInfo&&*焦点图显示的标题为 img 中 alt 属性中的文字&/p&
&p class=&importInfo&&*当只有一张图片时不显示按钮，但也会有无缝切换效果&/p&
&div class=&code&&
&h3 class=&title&&javascript:&/h3&
$(function(){
$(&#KinSlideshow&).KinSlideshow();
&h3 class=&title&&HTML:&/h3&
&div id=&KinSlideshow& style=&visibility:&&
&a href=&& target=&_blank&&&img src=&/down/js/jiaodiantu-794/images/1.jpg& alt=&这是标题一& /&&/a&
&a href=&& target=&_blank&&&img src=&/down/js/jiaodiantu-794/images/2.jpg& alt=&这是标题二& /&&/a&
&a href=&& target=&_blank&&&img src=&/down/js/jiaodiantu-794/images/3.jpg& alt=&这是标题三& /&&/a&
&a href=&& target=&_blank&&&img src=&/down/js/jiaodiantu-794/images/4.jpg& alt=&这是标题四& /&&/a&
&a href=&& target=&_blank&&&img src=&/down/js/jiaodiantu-794/images/5.jpg& alt=&这是标题五& /&&/a&
&a href=&& target=&_blank&&&img src=&/down/js/jiaodiantu-794/images/6.jpg& alt=&这是标题六& /&&/a&
&div class=&info&&
&div&&strong&小提示1:&/strong&&div&
&p&外层div建议加上一句样式：style=&visibility:&&/p&
&p&不加此句在IE下页面刚加载的瞬间时候会看到所有图片原始样子&/p&
&p&这是因为KinSlideshow 要等页面加载完成才能解析页面中要设置成焦点图的HTML&/p&
&p&虽然只有不到0.01秒的瞬间但用户体验不太好，所以建议加上。不加对程序也没影响！&/p&
&div&&strong&小提示2:&/strong&&div&
&p&想要兼容Chrome需要在img标签中写上图片的实际宽度和高度&img src= width=&xx& height=&xx& alt=&标题& &,其他浏览器不需要。&img src=&& alt=&标题& &&/p&
提示：你可以先修改部分代码再运行。
【上篇】【下篇】
您可能还会对这些文章感兴趣！
您必须才能发表留言！js实现的带左右按钮的多款幻灯片样式可自动切换的焦点图动画特效源码
js实现的带左右按钮的多款幻灯片样式可自动切换的焦点图动画特效源码脚本简介：
js实现的带左右按钮的多款幻灯片样式可自动切换的焦点图动画特效源码，是一款拥有多款幻灯片切换效果的特效代码，此段代码多用于网站中的图片展示区，拥有手动切换和自动切换两种方法，并且图片切换动画效果，随机自动选取，需要此段代码的朋友们可以前来下载使用。本段代码运行流畅，反应速度灵敏，是一段非常优秀的特效源码。建议采用支持HTML5的火狐胡谷歌等浏览器运行本源码。
下载地址：
解压密码：www.jb51.net 就是本站主域名，希望大家看清楚。
推荐使用 [
] 下载，使用 [
] 以上版本解压本站脚本。
如果这个脚本总是不能下载的请在评论中留言,我们会尽快修复，谢谢!
下载本站资源，如果服务器暂不能下载请过一段时间重试!
如果遇到什么问题，请评论留言，我们定会解决问题，谢谢大家支持!
本站提供的一些商业脚本是供学习研究之用，如用于商业用途，请购买正版。
本站提供的js实现的带左右按钮的多款幻灯片样式可自动切换的焦点图动画特效源码资源来源互联网，版权归该下载资源的合法拥有者所有。
不知如何下载的，可以查看