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


Posted in Javascript onJune 08, 2016

本文实例讲述了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">
<head>
  <title>JQuery的KinSlideshow插件打造超炫焦点图,带参数说明</title>
  <script language="javascript" type="text/javascript" src="/Scripts/jquery-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"; 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>
  <style type="text/css">
    #KinSlideshow{ overflow: hidden;width: 600px;height: 300px; }
  </style>
</head>
<body>
  <h2>
    打开页面随机选择切换方式(方向)---刷新页面</h2>
  <div id="KinSlideshow1" style="visibility: hidden;">
    <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>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
JS删除对象中某一属性案例详解
Sep 08 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 #Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 #Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 #Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 #Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 #Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 #Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 #Javascript
You might like
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
php的ajax简单实例
2014/02/27 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
旅游管理实习自我鉴定
2013/09/29 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
学生宿舍管理制度
2014/01/30 职场文书
初中生评语大全
2014/04/24 职场文书
法制宣传教育方案
2014/05/09 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
Python机器学习之逻辑回归
2021/05/11 Python