 
<div id="myFocus-wrap"> 
<div id="myFocus"> 
<!--焦點(diǎn)圖盒子--> 
<div class="loading"> 
<span>請稍候...</span></div> 
<!--載入畫面--> 
<ul class="pic"> 
<!--內(nèi)容列表--> 
<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的時(shí)候注意次序，因?yàn)檫@跟頁面加載js的次序有關(guān)：

復(fù)制代碼代碼如下:

 
<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可以查看官網(wǎng)：
http://www.cosmissy.com/myfocus/demo.html
Javascript：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
var mf = myFocus; //簡稱 
var param = { 
id: "myFocus", 
pattern: "mF_slide3D", 

time: 5, //切換時(shí)間間隔 
trigger: 'click', //觸發(fā)模式：click-點(diǎn)擊 mouseover-懸停 
width: 960 / 1, //區(qū)域?qū)挾?
height: 465 / 1, //區(qū)域高度 
txtHeight: 0 / 1, //文字層高度(0為隱藏) 
//txtWidth: 62 / 1, //為字段寬度(68-中等/82-較寬/32-較窄) 
auto: true, //是否自動播放 
wrap: false, //是否自帶邊框 
index: 0 / 1, //開始顯示的圖片順序(0表示第一張，不能大于總數(shù)) 
delay: 100 / 1, //按鈕懸停(mouseover)模式下的延遲時(shí)間，單位：毫秒（0-不延遲） 

//額外參數(shù) 
speed: 120, //運(yùn)動速度(數(shù)字越大，速度越慢) 
direction: 'left', //運(yùn)動方向：left top right bottom 
easing: 'easeInOut', //運(yùn)動形式： easeOut-快出慢入 easeIn-慢出快入 easeInOut-慢出慢入 linear-勻速運(yùn)動 
less: 1, //是否無縫 1-是 0-否 
//chip: 10, //圖切片數(shù)量（能被圖高整除才有效）（8/10/16） 
type: 4, //切片效果：1-甩頭 2-甩尾 3-凝亂 4-隨機(jī)效果 
gray: 0 / 1 //非當(dāng)前圖片是否變灰 1-是 0-否 
} 
myFocus.set(param, true); 

//屏蔽IE執(zhí)行誤差 
window.onerror = function () { return true }; 
</script> 

其他效果與文檔可以查看官網(wǎng)博客：
http://www.cosmissy.com/myfocus/demo.html

最新版本 myFocus all v1.1.0(2010.12.15更新)
演示地址:http://demo.jb51.net/js/myfocus/index.html
打包下載:http://chabaoo.cn/jiaoben/33989.html

您可能感興趣的文章: