網頁製作用JavaScript實現不同風格的圖片切換效果

1.資源下載

    首先需要下載一個myFocus庫（資源包），裏面包含數種不同風格的實現效果。

   下載地址：http://download.csdn.net/detail/antaomen/9704831

2.引入myFocus庫，找到存放的位置

myfocus-2.0.1.min.js存放在js文件夾中

    <script type="text/javascript" src="文件路徑/myfocus-2.0.1.min.js"></script>

3.設置效果

在my-pattern中有各種效果的css，可以直接修改pattern屬性值來更換效果

<script type="text/javascript">

myFocus.set({

id:'banner',//焦點圖div的id

pattern:'mF_name',//風格應用的名稱

time:3,//切換時間間隔(秒)

trigger:'click',//觸發切換模式:'click'(點擊)/'mouseover'(懸停)

width:450,//設置圖片區域寬度(像素)

height:296,//設置圖片區域高度(像素)

txtHeight:'default'//文字層高度設置(像素),'default'爲默認高度，0爲隱藏

});

</script>

set方法中前兩行即可修改效果，後面的可以省去。

4.設置div

注意要使用列表形式存放圖片

<div id="banner" style="visibility:hidden"><!--焦點圖div-->

<div class="loading"><span>請稍候...</span></div><!--載入畫面(可刪除)-->

<ul class="pic"><!--內容列表-->

<li><a href="#"><img src="img/1.jpg" thumb="" alt="標題1" text="詳細描述1" /></a></li>

<li><a href="#"><img src="img/2.jpg" thumb="" alt="標題2" text="詳細描述2" /></a></li>

<li><a href="#"><img src="img/3.jpg" thumb="" alt="標題3" text="詳細描述3" /></a></li>

<li><a href="#"><img src="img/4.jpg" thumb="" alt="標題4" text="詳細描述4" /></a></li>

<li><a href="#"><img src="img/5.jpg" thumb="" alt="標題5" text="詳細描述5" /></a></li>

</ul>

</div>

• thumb=圖片的略縮圖地址(需要風格支持，可以省略，如果省略即把大圖地址作爲它的地址)；
  
• alt=圖片的描述文字；
  
• text=圖片更詳細的描述文字(需要風格支持，可以省略)
  

  myFocus屬性的API文檔

• id

  焦點圖盒子ID[string(字符串)]，無默認值，必填項

• pattern

  風格應用名稱[string(字符串)]，默認值：'mF_fscreen_tb'

• time

  切換時間間隔[num(數字，單位秒)]，默認值：4

• width

  圖片區域寬度[num(數字，單位像素)]，無默認值，留空則從CSS樣式獲取大小

• height

  圖片區域高度[num(數字，單位像素)]，無默認值，留空則從CSS樣式獲取大小

• txtHeight

  文字層高度['default'(默認高度)|0(隱藏)|num(數字，單位像素)]，默認值：'default'

• trigger

  觸發切換模式['click'(鼠標點擊)|'mouseover'(鼠標懸停)]，默認值：'click'

• wrap

  是否保留邊框(有的話)[true|false]，默認值：true

• auto

  是否自動播放[true|false]，默認值：true

• index

  開始顯示的圖片序號(從0算起)[num(數字)]，默認值：0

• delay

  觸發切換模式中'mouseover'模式下的切換延遲[num(數字,單位毫秒)]，默認值：100

• css

  是否需要程序定義CSS[true|false]，默認值：true

• waiting(1.2.0新增)

  Loading畫面的最長等待時間(即從開始載入--圖片加載完--開始播放之間的等待時限，如果超過這個時限，即使圖片沒加載完都一律播放)[true(一直等待，直到所有焦點圖片全部加載完)|false(完全不等待，直接播放)|num(時限,單位秒)]，默認值：20

• path(1.2.0新增)

  風格應用文件的目錄路徑[string(字符串)]，默認值：'http://www.chhua.com/myfocus/js/pattern/'。注意此路徑是指向風格文件父目錄而不是某個風格文件，例如mF_slide3D這款風格文件在pattern文件夾目錄下，那麼path應該爲'pattern/'。

• autoZoom(1.2.1新增)

  是否允許圖片按比例縮小並居中以適應圖片區域大小(注意：某些風格可能不支持)[true|false]，默認值：false。

  
  
  來源： http://www.chhua.com/myfocus/api.html