XHTML結構：
復制代碼 代碼如下:
<div id="myFocus-wrap">
<div id="myFocus">
<!--焦點圖盒子-->
<div class="loading">
<span>請稍候...</span></div>
<!--載入畫面-->
<ul class="pic">
<!--內容列表-->
<li><a href="#">
<img src="images/index/focus1.jpg" alt="圖片1" /></a></li>
<li><a href="#">
<img src="images/index/focus2.jpg" alt="圖片2" /></a></li>
<li><a href="#">
<img src="images/index/focus3.jpg" alt="圖片3" /></a></li>
<li><a href="#">
<img src="images/index/focus4.jpg" alt="圖片4" /></a></li>
</ul>
</div>
</div>
引入myFocus版本js，引入js的時候注意次序，因為這跟頁面加載js的次序有關：
復制代碼 代碼如下:
<script src="js/flash/myfocus-1.0.4.full.js" type="text/javascript"></script>
<script src="js/flash/mF_slide3D.js" type="text/javascript"></script>
<link href="js/flash/mF_slide3D.css" rel="stylesheet" type="text/css" />
注：這裡用到了slide3D效果 其他效果Demo可以查看官網：
http://www.cosmissy.com/myfocus/demo.html
Javascript：
復制代碼 代碼如下:
<script type="text/javascript">
var mf = myFocus; //簡稱
var param = {
id: "myFocus",
pattern: "mF_slide3D",
time: 5, //切換時間間隔
trigger: 'click', //觸發模式：click-點擊 mouseover-懸停
width: 960 / 1, //區域寬度
height: 465 / 1, //區域高度
txtHeight: 0 / 1, //文字層高度(0為隱藏)
//txtWidth: 62 / 1, //為字段寬度(68-中等/82-較寬/32-較窄)
auto: true, //是否自動播放
wrap: false, //是否自帶邊框
index: 0 / 1, //開始顯示的圖片順序(0表示第一張，不能大於總數)
delay: 100 / 1, //按鈕懸停(mouseover)模式下的延遲時間，單位：毫秒（0-不延遲）
//額外參數
speed: 120, //運動速度(數字越大，速度越慢)
direction: 'left', //運動方向：left top right bottom
easing: 'easeInOut', //運動形式： easeOut-快出慢入 easeIn-慢出快入 easeInOut-慢出慢入 linear-勻速運動
less: 1, //是否無縫 1-是 0-否
//chip: 10, //圖切片數量（能被圖高整除才有效）（8/10/16）
type: 4, //切片效果：1-甩頭 2-甩尾 3-凝亂 4-隨機效果
gray: 0 / 1 //非當前圖片是否變灰 1-是 0-否
}
myFocus.set(param, true);
//屏蔽IE執行誤差
window.onerror = function () { return true };
</script>
其他效果與文檔可以查看官網博客：
http://www.cosmissy.com/myfocus/demo.html
最新版本 myFocus all v1.1.0(2010.12.15更新)
演示地址:http://demo.jb51.net/js/myfocus/index.html
打包下載:http://www.jb51.net/jiaoben/33989.html