`
小杨学JAVA
  • 浏览: 905279 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

KinSlideshow参数设置说明

 
阅读更多

KinSlideshow参数设置说明

<script type="text/javascript"></script>标签:

杂谈

分类: 开发技术

<!-- 正文开始 -->

Jquery.KinSlideshow参数设置说明:
附:所有参数列表
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]。
 
 
【多项复合】参数调用说明
$(function(){
$("#KinSlideshow").KinSlideshow({
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"}
//设置标题文字大小为14px,颜色:#FF0000 【titleFont 其他未设置的 使用默认参数设置】
});
})  
 
 
 
  1. <script type="text/javascript">
  2. var moveStyle
  3. var rand = parseInt(Math.random() * 4)
  4. switch (rand) {
  5. case 0: moveStyle = "left"; break;
  6. case 1: moveStyle = "right"; break;
  7. case 2: moveStyle = "down"; break;
  8. case 3: moveStyle = "up"; break;
  9. }
  10. $(function () {
  11. $("#KinSlideshow1").KinSlideshow({ moveStyle: moveStyle });
  12. })
  13. /**
  14. * jQuery KinSlideshow plugin
  15. intervalTime:5, //设置间隔时间为5秒 【单位:秒】 [默认为5秒]
  16. moveSpeedTime:400 //切换一张图片所需时间,【单位:毫秒】[默认为400毫秒]
  17. moveStyle:"left", //切换方向 可选值:【 left | right | up | down 】left:向左切换,right:向右切换,up:向上切换,down:向下切换 [默认向左切换]
  18. mouseEvent:"mouseclick", //鼠标操作按钮事件,可选值:【mouseclick | mouseover】mouseclick:鼠标单击切换。mouseover:鼠标滑过切换。[默认为鼠标点击按钮切换]
  19. isHasTitleBar:true, //是否显示标题背景 可选值:【 true | false 】[默认为true]
  20. titleBar:{titleBar_height:40,titleBar_bgColor:"#000000",titleBar_alpha:0.5},//标题背景样式,(isHasTitleBar = true 前提下启用)
  21. titleBar_height :40 - > 标题背景高度。[默认:40]
  22. titleBar_bgColor:"#000000" - > 标题背景颜色。[默认:#000000]
  23. titleBar_alpha:0.5 -> 标题背景透明度,取值【0~1】。[默认:0.5]
  24. isHasTitleFont:true, //是否显示标题文字 可选值:【 true | false 】[默认为true]
  25. titleFont:{TitleFont_size:12,TitleFont_color:"#FFFFFF",TitleFont_family:"Verdana",TitleFont_weight:"bold"}, //标题文字样式,(isHasTitleFont = true 前提下启用)
  26. TitleFont_size - > 标题文字大小 单位像素。[默认:12]
  27. TitleFont_color:"#FFFFFF" - > 标题文字颜色。[默认:#000000]
  28. TitleFont_family:"Verdana" -> 标题文字字体。[默认:Verdana]
  29. TitleFont_weight:"bold" -> 标题文字粗细。可选值:【 bold | normal 】[默认:"bold"] ,normal 正常 不加粗。
  30. isHasBtn:true, //是否显示按钮
  31. btn:{btn_bgColor:"#666666",btn_bgHoverColor:"#CC0000",
  32. btn_fontColor:"#CCCCCC",btn_fontHoverColor:"#000000",btn_fontFamily:"Verdana",
  33. btn_borderColor:"#999999",btn_borderHoverColor:"#FF0000",
  34. btn_borderWidth:1,btn_bgAlpha:0.7} //按钮样式设置,(isHasBtn = true 前提下启用)
  35. btn_bgColor:"#666666" -> 按钮背景颜色 [默认:"#666666"]。
  36. btn_bgHoverColor:"#CC0000" -> 按钮滑过/点击 背景颜色 [默认:"#CC0000"]。
  37. btn_fontColor:"#CCCCCC" -> 按钮文字颜色 [默认:"#CCCCCC"]。
  38. btn_fontHoverColor:"#000000" -> 按钮滑过/点击 按钮文字颜色 [默认:"#000000"]。
  39. btn_fontFamily:"Verdana", -> 按钮文字字体 [默认:"Verdana"]。
  40. btn_borderColor:"#999999" -> 按钮边框颜色 [默认:"#999999"]。
  41. btn_borderHoverColor:"#FF0000" -> 按钮滑过/点击 按钮边框颜色 [默认:"#FF0000"]。
  42. btn_borderWidth:1 -> 按钮边框宽度,单位像素 不能超过3 [默认:1]。
  43. btn_bgAlpha:0.7 -> 按钮透明度 ,取值【0~1】 [默认:0.7]。
  44. *
  45. **/
  46. </script>
分享到:
评论

相关推荐

    网站常用插件之KinSlideshow

    下面将详细介绍 KinSlideshow 的核心特性、使用方法以及如何进行设置。 ### 一、KinSlideshow 简介 KinSlideshow 是基于 jQuery 库开发的一款轻量级图片轮播插件。它提供了丰富的自定义选项,可以轻松实现图片的...

    KinSlideshow幻灯片插件

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

    Jquery幻灯片焦点图插件Jquery.KinSlideshow的各种Demo

    - **易于定制**:jQuery.KinSlideshow提供了一套完整的API接口,允许开发者根据实际需求进行个性化设置,如调整过渡速度、设置自动播放、添加导航按钮等。 - **响应式设计**:考虑到移动设备的普及,此插件支持响应...

    jquery.KinSlideshow-1.2

    4. **配置参数**:例如,你可以设置`autoPlay`为`true`实现自动播放,`interval`设置轮播间隔时间,`transition`选择过渡效果等。 5. **添加控制元素**:可选地,可以添加导航点和箭头控制,通过插件提供的API进行...

    KinSlideshow 1.2.1(最新版本)

    使用超级简单: javascript: ...$("#KinSlideshow").KinSlideshow(); }) HTML: &lt;div id="KinSlideshow" &gt; &lt;a href="http://www.qq1.com" target="_blank"&gt;&lt;img src="images/1.jpg" alt="这是标题一" /&gt; ...

    KinSlideshow1.2.1源代码(非压缩版)

    这通常通过接受参数或设置默认值实现。 7. **兼容性处理**:考虑到不同的浏览器可能对某些特性支持不同,插件可能包含了一些兼容性检查和修复代码,确保在各种环境下都能正常工作。 8. **模块化和封装**:为了提高...

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

    3. **自动播放**:KinSlideshow支持自动播放功能,可以设置间隔时间,让图片幻灯片按照设定的时间自动进行切换,无需用户手动操作。 4. **导航控制**:提供箭头、点状指示器等导航元素,用户可以通过这些控件轻松...

    KinSlideshow-1.1

    $("#KinSlideshow").KinSlideshow(); }) HTML: &lt;div id="KinSlideshow" &gt; &lt;a href="http://www.qq1.com" target="_blank"&gt;&lt;img src="images/1.jpg" alt="这是标题一" /&gt; ...

    KinSlideshow1.2.1 基于jquery的幻灯片/焦点图插件 js源码下载

    KinSlideshow1.2.1图片轮播插件非压缩版源代码,方便需要修改的童鞋。实例参考地址http://www.lanrentuku.com/js/jiaodiantu-794.html Jquery幻灯片焦点图插件,感谢支持。

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

    用户可以通过设置参数来自定义滑动的方向(如左右、上下)、速度、动画效果等。该插件通过监听用户的交互事件,如点击或自动轮播,触发图片的切换,并利用CSS3的过渡和动画效果实现平滑的过渡。 二、关键功能详解 ...

    Jquery.KinSlideshow演示导航

    2. **自定义设置**:用户可以根据需求调整幻灯片的速度、延迟时间、动画类型以及是否自动播放等参数,实现个性化定制。 3. **导航控制**:除了自动播放外,还提供导航箭头和页码指示器,方便用户手动切换。 4. **...

    KinSlideshow 基于Jquery的幻灯片焦点图插件VIEW1.zip

    3. 初始化插件:在文档加载完成后,使用jQuery选择器选取容器并调用KinSlideshow插件,设置相关参数。例如: ```javascript $(document).ready(function(){ $('#kin-slideshow').kinSlideshow({ duration: 3000,...

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

    KinSlideshow插件提供了一系列的参数供开发者配置,这些参数控制了焦点图轮播的行为和显示效果。 - **intervalTime**:设置轮播的间隔时间,单位是秒,默认值为5秒。 - **moveSpeedTime**:设置图片切换所需的时间...

    KinSlideshow 基于jquery的幻灯片焦点图插件.zip

    3. **初始化插件**:在文档加载完成后,使用jQuery选择器找到容器元素,并调用KinSlideshow插件进行初始化,设置相应的参数,如自动播放、过渡效果、导航按钮等。 4. **自定义配置**:KinSlideshow通常提供了许多可...

    jquery 图片轮播

    "&gt;&lt;div id="KinSlideshow_content"&gt;&lt;a target="_blank" href="http://www.qq1.com"&gt;&lt;img width="600" height="300" alt="这是标题一" src="images/1.jpg" style="border: 0px none;"&gt;&lt;/a&gt;&lt;a target="_blank" href=...

Global site tag (gtag.js) - Google Analytics