KinSlideshow图片轮显

最新推荐文章于 2017-11-28 11:20:22 发布

Amiao999

最新推荐文章于 2017-11-28 11:20:22 发布

阅读量583

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/zhaohongx/article/details/25313723

版权

本文介绍了如何利用KinSlideshow库创建一个动态图片轮显效果，包括设置参数、添加图片、实现过渡动画等关键步骤，帮助开发者实现简洁高效的图片展示功能。

摘要由CSDN通过智能技术生成

     <div id="KinSlideshow" style="visibility: hidden;">
                <a href="/"><img src="img/1.jpg" alt="" width="690" height="250" /></a> 
                <a href="/"><img src="img/2.jpg" alt="" width="690" height="250" /></a> 
                <a href="/"><img src="img/3.jpg" alt="" width="690" height="250" /></a> 
                <a href="/"><img src="img/4.jpg" alt="" width="690" height="250" /></a>
        </div>

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Amiao999

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

KinSlideshow 1.2.1(最新版本)

12-10

使用超级简单： javascript: $(function(){ $("#KinSlideshow").KinSlideshow(); }) HTML: <div id="KinSlideshow" > <a href="http://www.qq1.com" target="_blank"><img src="images/1.jpg" alt="这是标题一" /></a> <a href="http://www.qq2.com" target="_blank"><img src="images/2.jpg" alt="这是标题二" /></a> <a href="http://www.qq3.com" target="_blank"><img src="images/3.jpg" alt="这是标题三" /></a> <a href="http://www.qq4.com" target="_blank"><img src="images/4.jpg" alt="这是标题四" /></a> <a href="http://www.qq5.com" target="_blank"><img src="images/5.jpg" alt="这是标题五" /></a> <a href="http://www.qq6.com" target="_blank"><img src="images/6.jpg" alt="这是标题六" /></a> </div> jQuery. KinSlideshow幻灯片插件，基本能满足你在网页上使用幻灯片(焦点图)效果，兼容所有主流浏览器。

网站常用插件之KinSlideshow

09-06

好用的广告切换图片插件，只要简单设置一下就可以实现你要的效果。具体怎么设置，你看一下文档就明白了的。

参与评论您还未登录，请先登录后发表或查看评论

JQuery的KinSlideshow插件打造超炫焦点轮播图,带参数说明

diehe5608的博客

09-13

110

<!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&gt...

Jquery焦点图/幻灯片效果插件 KinSlideshow

weixin_34319374的博客

12-24

120

JavaScript $(function(){ $("#KinSlideshow").KinSlideshow({ moveStyle:"down", //设置切换方向为向下 [默认向左切换] intervalTime:8, //设置间隔时间为8秒 [默认为5秒] ...

Jquery.KinSlideshow演示导航

kevin

08-09

1225

Jquery.KinSlideshow演示导航默认设置效果自定义切换参数效果自定义外观参数效果这是标题二inSlideshow自定义外观参数效果:*焦点图显示的标题为 img 中 alt 属性中的文字

KinSlideshow jQuery 多样式图片幻灯片插件

05-12

内容索引:脚本资源,jQuery,KinSlideshow,图片幻灯,图片切换　jQuery幻灯片插件，基本能满足你在网页上使用幻灯片(焦点图)效果，兼容IE6/IE7/IE8/IE9,FireFox,Chrome,Opera。　想要兼容Chrome需要在img标签中写上...

jQuery焦点图轮播插件KinSlideshow用法分析

10-22

根据给定文件内容，知识点...### jQuery焦点图轮播插件KinSlideshow用法 #### 1. 引入KinSlideshow插件在使用KinSlideshow插件前，需要将jQuery库和KinSlideshow插件的js文件引入到HTML页面中。示例如下： ```html ...

jquery.KinSlideshow焦点图插件可以自定义方向滚动的焦点图片切换.zip

08-24

jQuery KinSlideshow是基于JavaScript库jQuery构建的，它的核心功能是实现图片或内容的滑动展示。用户可以通过设置参数来自定义滑动的方向（如左右、上下）、速度、动画效果等。该插件通过监听用户的交互事件，如...

KinSlideshow幻灯片插件

03-23

KinSlideshow幻灯片插件下载,新闻滚动切换效果

kinSildeshow jquery插件，做banner焦点图或广告还是挺方便的

12-27

jQuery插件，kinslideshow，制作焦点图、广告、图片切换很方便，没发现不兼容的，使用起来方便，下面是一些参数配置 [removed] 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 }); }) /** * jQuery KinSlideshow plugin intervalTime:5, //设置间隔时间为5秒【单位：秒】 [默认为5秒] moveSpeedTime:400 //切换一张图片所需时间，【单位：毫秒】[默认为400毫秒] moveStyle:"left", //切换方向可选值：【 left | right | up | down 】left:向左切换,right:向右切换,up:向上切换,down:向下切换 [默认向左切换] mouseEvent:"mouseclick", //鼠标操作按钮事件,可选值：【mouseclick | mouseover】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]。 * **/ [removed]

jquery 图片轮播

05-09

图片轮播KinSlideshow注意事项

云上人间钦自赏

11-28

878

先上图： 1、特别注意：图片和a连接不要换行，不然会出现图片播放时无法无缝连接。上边代码一定要在一行，不能手动换行，多张图片可以换行。 2、ie8图片不显示问题图片的尺寸，只能用代码的格式写，不能写在style里。只能说明插件老咯，可惜了。

网站开发常用插件之广告轮播(KinSlideshow)

lhl6379140的专栏

09-06

1253

以前一直不记录自己学过的知识，也不注意自己到底用过了哪些插件，最近准备辞职，回头一想，惨了，自己在公司做了快两年，到底学会了什么？一开始想的时候觉得，好像没什么啊，再仔细想想，其实一些常用的插件之类的还是应该记录下来的，毕竟以后只要自己还做这一行，就还是会用到的，于是，就从自己用过的插件说起。第一次做记录，写的不好的地方，请大家多多包含啊。今天就先说说KinSlideshow这个插件，相信很多

jquery中焦点图插件kinslideshow

雨枫的专栏

12-19

903

JQuery幻灯片焦点图插件代码 JQuery幻灯片焦点图插件兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件，功能很多，基本能满足你在网页上使用幻灯片(焦点图)效果。演示如下： KinSlideshow默认设置效果代码: *焦点图显示的标题为 img 中 alt 属性中的文字 *当只有一张图片时

jQuery动画、图片切换 KinSlideshow jQuery 多样式图片幻灯片插件

人生若南柯一梦

01-11

3598

$(function(){ $("#KinSlideshow").KinSlideshow({ moveStyle:"down", //设置切换方向为向下 [默认向左切换] intervalTime:8, //设置间隔时间为8秒 [默认为5秒] mouseEvent:"mo

KinSlideshow幻灯片插件 Jquery幻灯片图片切换

人生若南柯一梦

03-20

1392

$(function(){ $("#KinSlideshow").KinSlideshow({ moveStyle:"down", //设置切换方向为向下 [默认向左切换] intervalTime:8, //设置间隔时间为8秒 [默认为5秒] mouseEvent:"mo

KinSlideshow参数设置说明

yangdonghhm的专栏

02-26

385

KinSlideshow参数设置说明 <script type="text/javascript"></script>标签：杂谈分类：开发技术  Jquery.KinSlideshow参数设置说明：附：所有参数列表 intervalTime:5, //设置间隔时间为5秒【单位：秒】 [默...