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

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 插件
, 轮播
, 焦点图
KinSlideshow
jquery左右轮播焦点图、jquery焦点图轮播、jquery焦点图轮播代码、jquery焦点图轮播插件、jquery3d焦点轮播图,以便于您获取更多的相关知识。

时间: 2024-11-18 10:25:28

jQuery焦点图轮播插件KinSlideshow用法分析_jquery的相关文章

jQuery焦点图轮播效果实现方法_jquery

本文实例讲述了jQuery焦点图轮播效果实现方法.分享给大家供大家参考,具体如下: 前面一篇<JS实现焦点图轮播效果的方法详解>详细介绍了JS实现焦点图轮播效果的步骤,这里来分析一下jQuery的相关实现技巧. 核心代码如下: $(function(){ var $next=$(".right"); var $prev=$(".left"); var $list_num=$(".list-num a"); var $banner=$(

jQuery焦点图轮播特效代码分享(3款)_jquery

本文实例讲述了jQuery焦点图轮播特效代码.分享给大家供大家参考.具体如下: jQuery cxSlide实现的三款多功能大气焦点图轮播特效源码,是一段拥有三种不同风格和效果的焦点图轮播代码,其中有两款最有意思,一款是在将焦点图图片分成了四块,每个图片都连接到不同的地址,并且还拥有鼠标悬浮内图时,其它图片都变暗了的效果,另外一款是,带有带缩略图和文字描述效果的焦点图轮播代码. 运行效果图: ----------------------查看效果 源码下载---------------------

jQuery简单自定义图片轮播插件及用法示例_jquery

本文实例讲述了jQuery简单自定义图片轮播插件及用法.分享给大家供大家参考,具体如下: 经常使用别人的插件,现在自己写一个,纪念一下. jQuery.banner.js: /* * banner 0.1 * 使用banner 实现图片定时切换 鼠标经过停止动画 * 鼠标离开,继续动画 */ ;(function($){ $.fn.banner =function(options){ //各种属性和参数 var defaults ={ picWidth:"1000", picHeigh

JS实现焦点图轮播效果的方法详解_javascript技巧

本文实例讲述了JS实现焦点图轮播效果的方法.分享给大家供大家参考,具体如下: 效果图如下: 一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 二.结构和样式 <div id="banner" class="banner"> <ul id="list-banner" class="list-banner fn-clear" style="lef

jQuery焦点图切换简易插件制作过程全纪录_jquery

首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下. js文件夹下面有两个文件夹jquery.jslide.js与jquery.jslides.js,前面一个是我改写的,第二个是原作者的文件.下图是效果图: 一.静态效果 <div class="slide_wrap"> <ul id="slides2" class="slide"> <li s

12款经典的白富美型—jquery图片轮播插件—前端开发必备_jquery

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你. Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓  16个独特的过渡效果

jQuery超精致图片轮播幻灯片特效代码分享_jquery

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现超精致图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:                               -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="styles/97zzw.css"

jQuery多级联动下拉插件chained用法示例_jquery

本文实例讲述了jQuery多级联动下拉插件chained用法.分享给大家供大家参考,具体如下: <!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">

jquery自动补齐功能插件flexselect用法示例_jquery

本文实例讲述了jquery自动补齐功能插件flexselect用法.分享给大家供大家参考,具体如下: 这几天正在做一个东东.需要用到自动补齐的功能.也就是select控件的文本项可以让它写.默认的select文本框是只读的,不能写.在网上找到一个jQuery插件:flexselect可以完成这项功能. 将插件放到项目里.然后在页面中引用这个插件. <script src="${pageContext.request.contextPath}/js/jquery.flexselect-0.2