首頁 > 開發者 > JavaScript

JQuery的KinSlideshow外掛程式打造超炫焦點圖,帶參數說明

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

[html] 
<!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> 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More