Jquery.KinSlideshow 焦點圖標輪換

這個裏邊講的簡單、易讀 ：http://www.lanrentuku.com/down/js/jiaodiantu-794/demo3.html

 

KinSlideshow自定義外觀參數效果:

*焦點圖顯示的標題爲 img 中 alt 屬性中的文字

*當只有一張圖片時不顯示按鈕，但也會有無縫切換效果

javascript:

    $(function(){
        $("#KinSlideshow").KinSlideshow({
                moveStyle:"right",
                titleBar:{titleBar_height:30,titleBar_bgColor:"#08355c",titleBar_alpha:0.5},
                titleFont:{TitleFont_size:12,TitleFont_color:"#FFFFFF",TitleFont_weight:"normal"},
                btn:{btn_bgColor:"#FFFFFF",btn_bgHoverColor:"#1072aa",btn_fontColor:"#000000",
                     btn_fontHoverColor:"#FFFFFF",btn_borderColor:"#cccccc",
                     btn_borderHoverColor:"#1188c0",btn_borderWidth:1}
        });
    })
  

HTML:

  <div id="KinSlideshow" style="visibility:hidden;">
      <a href="http://www.lanrentuku.com" target="_blank"><img src="images/1.jpg" alt="這是標題一" /></a>
      <a href="http://www.lanrentuku.com" target="_blank"><img src="images/2.jpg" alt="這是標題二" /></a>
      <a href="http://www.lanrentuku.com" target="_blank"><img src="images/3.jpg" alt="這是標題三" /></a>
      <a href="http://www.lanrentuku.com" target="_blank"><img src="images/4.jpg" alt="這是標題四" /></a>
      <a href="http://www.lanrentuku.com" target="_blank"><img src="images/5.jpg" alt="這是標題五" /></a>
      <a href="http://www.lanrentuku.com" target="_blank"><img src="images/6.jpg" alt="這是標題六" /></a>
  </div>
  

附：全部參數列表

intervalTime:5,   		

moveSpeedTime:400  		

moveStyle:"left",		

mouseEvent:"mouseclick",	

isHasTitleBar:true,		

titleBar:{titleBar_height:40,titleBar_bgColor:"#000000",titleBar_alpha:0.5},
          
isHasTitleFont:true,	   

titleFont:{TitleFont_size:12,TitleFont_color:"#FFFFFF",TitleFont_family:"Verdana",TitleFont_weight:"bold"},       
         
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} 
      //設置間隔時間爲5秒 【單位：秒】 [默認爲5秒]//切換一張圖片所需時間，【單位：毫秒】[默認爲400毫秒]//切換方向 可選值：【 left | right | up | down 】left:向左切換,right:向右切換,up:向上切換,down:向下切換 [默認向左切換]//鼠標操做按鈕事件,可選值：【mouseclick | mouseover】mouseclick：鼠標單擊切換。mouseover：鼠標滑過切換。[默認爲鼠標點擊按鈕切換]//是否顯示標題背景 可選值：【 true | false 】[默認爲true]//標題背景樣式，(isHasTitleBar = true 前提下啓用)titleBar_height :40 - > 標題背景高度。[默認：40]
          titleBar_bgColor:"#000000" - > 標題背景顏色。[默認：#000000]
          titleBar_alpha:0.5 -> 標題背景透明度，取值【0~1】。[默認：0.5]//是否顯示標題文字 可選值：【 true | false 】[默認爲true]//標題文字樣式，(isHasTitleFont = true 前提下啓用)TitleFont_size - > 標題文字大小 單位像素。[默認：12]
          TitleFont_color:"#FFFFFF" - > 標題文字顏色。[默認：#000000]
          TitleFont_family:"Verdana" -> 標題文字字體。[默認：Verdana] 
          TitleFont_weight:"bold" -> 標題文字粗細。可選值：【 bold | normal 】[默認："bold"]  ,normal 正常 不加粗。//是否顯示按鈕//按鈕樣式設置，(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]。

【多項複合】參數調用說明

  $(function(){
      $("#KinSlideshow").KinSlideshow({
              titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} 
      });
  })
  //設置標題文字大小爲14px，顏色：#FF0000 【titleFont 其餘未設置的 使用默認參數設置】

小提示1:

外層div建議加上一句樣式：style="visibility:hidden;"

不加此句在IE下頁面剛加載的瞬間時候會看到全部圖片原始樣子

這是由於KinSlideshow 要等頁面加載完成才能解析頁面中要設置成焦點圖的HTML

雖然只有不到0.01秒的瞬間但用戶體驗不太好，因此建議加上。不加對程序也沒影響！

小提示2:

想要兼容Chrome須要在img標籤中寫上圖片的實際寬度和高度<img src= width="xx" height="xx" alt="標題" >,其餘瀏覽器不須要。<img src="" alt="標題" >