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 相关文章推荐
Javascript的IE和Firefox兼容性汇编
Jul 01 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
javascript中xml操作实现代码
Nov 21 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
基于JavaScript实现随机点名器
Feb 25 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四大安全策略
2014/03/12 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
php检测url是否存在的方法
2015/04/14 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
SVG实现时钟效果
2018/07/17 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
python实现在windows下操作word的方法
2015/04/28 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
python求最大值最小值方法总结
2019/06/25 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
八年级生物教学反思
2014/01/22 职场文书
欢迎领导标语
2014/06/27 职场文书
2014年老干部工作总结
2014/11/21 职场文书
师德师风个人总结
2015/02/06 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
详细聊聊vue中组件的props属性
2021/11/02 Vue.js