XHTML結(jié)構(gòu):
<div id="myFocus-wrap">
<div id="myFocus">
<!--焦點(diǎn)圖盒子-->
<div class="loading">
<span>請(qǐng)稍候...</span></div>
<!--載入畫(huà)面-->
<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)檫@跟頁(yè)面加載js的次序有關(guān):
<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:
<script type="text/javascript">
var mf = myFocus; //簡(jiǎn)稱
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, //是否自動(dòng)播放
wrap: false, //是否自帶邊框
index: 0 / 1, //開(kāi)始顯示的圖片順序(0表示第一張,不能大于總數(shù))
delay: 100 / 1, //按鈕懸停(mouseover)模式下的延遲時(shí)間,單位:毫秒(0-不延遲)
//額外參數(shù)
speed: 120, //運(yùn)動(dòng)速度(數(shù)字越大,速度越慢)
direction: 'left', //運(yùn)動(dòng)方向:left top right bottom
easing: 'easeInOut', //運(yùn)動(dòng)形式: easeOut-快出慢入 easeIn-慢出快入 easeInOut-慢出慢入 linear-勻速運(yùn)動(dòng)
less: 1, //是否無(wú)縫 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.VeVB.COm/js/myfocus/index.html
打包下載://m.survivalescaperooms.com/jiaoben/33989.html