jQuery焦點(diǎn)圖輪播插件KinSlideshow用法分析

字號(hào):


    本文實(shí)例講述了jQuery焦點(diǎn)圖輪播插件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插件打造超炫焦點(diǎn)圖,帶參數(shù)說明</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,     //設(shè)置間隔時(shí)間為5秒 【單位:秒】 [默認(rèn)為5秒]
        moveSpeedTime:400    //切換一張圖片所需時(shí)間,【單位:毫秒】[默認(rèn)為400毫秒]
        moveStyle:"left",    //切換方向 可選值:【 left | right | up | down 】left:向左切換,right:向右切換,up:向上切換,down:向下切換 [默認(rèn)向左切換]
        mouseEvent:"mouseclick",  //鼠標(biāo)操作按鈕事件,可選值:【mouseclick | mouseover】mouseclick:鼠標(biāo)單擊切換。mouseover:鼠標(biāo)滑過切換。[默認(rèn)為鼠標(biāo)點(diǎn)擊按鈕切換]
        isHasTitleBar:true,   //是否顯示標(biāo)題背景 可選值:【 true | false 】[默認(rèn)為true]
        titleBar:{titleBar_height:40,titleBar_bgColor:"#000000",titleBar_alpha:0.5},//標(biāo)題背景樣式,(isHasTitleBar = true 前提下啟用)
        titleBar_height :40 - > 標(biāo)題背景高度。[默認(rèn):40]
        titleBar_bgColor:"#000000" - > 標(biāo)題背景顏色。[默認(rèn):#000000]
        titleBar_alpha:0.5 -> 標(biāo)題背景透明度,取值【0~1】。[默認(rèn):0.5]
        isHasTitleFont:true,  //是否顯示標(biāo)題文字 可選值:【 true | false 】[默認(rèn)為true]
        titleFont:{TitleFont_size:12,TitleFont_color:"#FFFFFF",TitleFont_family:"Verdana",TitleFont_weight:"bold"}, //標(biāo)題文字樣式,(isHasTitleFont = true 前提下啟用)
        TitleFont_size - > 標(biāo)題文字大小 單位像素。[默認(rèn):12]
        TitleFont_color:"#FFFFFF" - > 標(biāo)題文字顏色。[默認(rèn):#000000]
        TitleFont_family:"Verdana" -> 標(biāo)題文字字體。[默認(rèn):Verdana]
        TitleFont_weight:"bold" -> 標(biāo)題文字粗細(xì)??蛇x值:【 bold | normal 】[默認(rèn):"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} //按鈕樣式設(shè)置,(isHasBtn = true 前提下啟用)
        btn_bgColor:"#666666" -> 按鈕背景顏色 [默認(rèn):"#666666"]。
        btn_bgHoverColor:"#CC0000" -> 按鈕滑過/點(diǎn)擊 背景顏色 [默認(rèn):"#CC0000"]。
        btn_fontColor:"#CCCCCC" -> 按鈕文字顏色 [默認(rèn):"#CCCCCC"]。
        btn_fontHoverColor:"#000000" -> 按鈕滑過/點(diǎn)擊 按鈕文字顏色 [默認(rèn):"#000000"]。
        btn_fontFamily:"Verdana", -> 按鈕文字字體 [默認(rèn):"Verdana"]。
        btn_borderColor:"#999999" -> 按鈕邊框顏色 [默認(rèn):"#999999"]。
        btn_borderHoverColor:"#FF0000" -> 按鈕滑過/點(diǎn)擊 按鈕邊框顏色 [默認(rèn):"#FF0000"]。
        btn_borderWidth:1 -> 按鈕邊框?qū)挾?,單位像?不能超過3 [默認(rèn):1]。
        btn_bgAlpha:0.7 -> 按鈕透明度 ,取值【0~1】 [默認(rèn):0.7]。
        *
        **/
      </script>
      <style type="text/css">
        #KinSlideshow{ overflow: hidden;width: 600px;height: 300px; }
      </style>
    </head>
    <body>
      <h2>
        打開頁面隨機(jī)選擇切換方式(方向)---刷新頁面</h2>
      <div id="KinSlideshow1">
        <a href="" target="_blank"><img src="/images/1.jpg" width="600" height="300" /></a>
        <a href="" target="_blank"><img src="/images/2.jpg" width="600" height="300" /></a>
        <a href="" target="_blank"><img src="/images/3.jpg" width="600" height="300" /></a>
      </div>
    </body>
    </html>
    希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。