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 其他未设置的 使用默认参数设置】
});
})
- <script type="text/javascript">
- 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]。
- *
- **/
- </script>
相关推荐
下面将详细介绍 KinSlideshow 的核心特性、使用方法以及如何进行设置。 ### 一、KinSlideshow 简介 KinSlideshow 是基于 jQuery 库开发的一款轻量级图片轮播插件。它提供了丰富的自定义选项,可以轻松实现图片的...
KinSlideshow幻灯片插件下载,新闻滚动切换效果
- **易于定制**:jQuery.KinSlideshow提供了一套完整的API接口,允许开发者根据实际需求进行个性化设置,如调整过渡速度、设置自动播放、添加导航按钮等。 - **响应式设计**:考虑到移动设备的普及,此插件支持响应...
4. **配置参数**:例如,你可以设置`autoPlay`为`true`实现自动播放,`interval`设置轮播间隔时间,`transition`选择过渡效果等。 5. **添加控制元素**:可选地,可以添加导航点和箭头控制,通过插件提供的API进行...
使用超级简单: javascript: ...$("#KinSlideshow").KinSlideshow(); }) HTML: <div id="KinSlideshow" > <a href="http://www.qq1.com" target="_blank"><img src="images/1.jpg" alt="这是标题一" /> ...
这通常通过接受参数或设置默认值实现。 7. **兼容性处理**:考虑到不同的浏览器可能对某些特性支持不同,插件可能包含了一些兼容性检查和修复代码,确保在各种环境下都能正常工作。 8. **模块化和封装**:为了提高...
3. **自动播放**:KinSlideshow支持自动播放功能,可以设置间隔时间,让图片幻灯片按照设定的时间自动进行切换,无需用户手动操作。 4. **导航控制**:提供箭头、点状指示器等导航元素,用户可以通过这些控件轻松...
$("#KinSlideshow").KinSlideshow(); }) HTML: <div id="KinSlideshow" > <a href="http://www.qq1.com" target="_blank"><img src="images/1.jpg" alt="这是标题一" /> ...
KinSlideshow1.2.1图片轮播插件非压缩版源代码,方便需要修改的童鞋。实例参考地址http://www.lanrentuku.com/js/jiaodiantu-794.html Jquery幻灯片焦点图插件,感谢支持。
用户可以通过设置参数来自定义滑动的方向(如左右、上下)、速度、动画效果等。该插件通过监听用户的交互事件,如点击或自动轮播,触发图片的切换,并利用CSS3的过渡和动画效果实现平滑的过渡。 二、关键功能详解 ...
2. **自定义设置**:用户可以根据需求调整幻灯片的速度、延迟时间、动画类型以及是否自动播放等参数,实现个性化定制。 3. **导航控制**:除了自动播放外,还提供导航箭头和页码指示器,方便用户手动切换。 4. **...
3. 初始化插件:在文档加载完成后,使用jQuery选择器选取容器并调用KinSlideshow插件,设置相关参数。例如: ```javascript $(document).ready(function(){ $('#kin-slideshow').kinSlideshow({ duration: 3000,...
KinSlideshow插件提供了一系列的参数供开发者配置,这些参数控制了焦点图轮播的行为和显示效果。 - **intervalTime**:设置轮播的间隔时间,单位是秒,默认值为5秒。 - **moveSpeedTime**:设置图片切换所需的时间...
3. **初始化插件**:在文档加载完成后,使用jQuery选择器找到容器元素,并调用KinSlideshow插件进行初始化,设置相应的参数,如自动播放、过渡效果、导航按钮等。 4. **自定义配置**:KinSlideshow通常提供了许多可...
"><div id="KinSlideshow_content"><a target="_blank" href="http://www.qq1.com"><img width="600" height="300" alt="这是标题一" src="images/1.jpg" style="border: 0px none;"></a><a target="_blank" href=...