继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

调用myFocus制作轮播图

糊里糊涂的_
关注TA
已关注
手记 1
粉丝 0
获赞 3

1、在head中引入myFocus库
<script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>
<script src="js/mf-pattern/mF_YSlider.js" type="text/javascript"></script>
<link href="js/mf-pattern/mF_YSlider.css" rel="stylesheet" type="text/css" />
2、创建myFocus结构
<div class="ad" id="picBox">
<div class="loading"><img src="img/loading.gif" alt="正在加载中...."/></div>
<div class="pic">
<ul>
<li><img src="img/ad4.jpg"/></li>
<li><img src="img/ad2.jpg"/></li>
<li><img src="img/ad3.jpg"/></li>
</ul>
</div>
</div>
3、在head结束前调用(两种方法)
1)<script type="text/javascript">
myFocus.set({id:“picBox”});
</script>
2)<script type="text/javascript">
myFocus.set({
id:'picBox',//焦点图盒子ID
pattern:'mF_name',//风格应用的名称
time:3,//切换时间间隔(秒)
trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
width:450,//设置图片区域宽度(像素)
height:296,//设置图片区域高度(像素)
txtHeight:'default'//文字层高度设置(像素),'default'为默认高度,0为隐藏
});
</script>
注意:
1、焦点图初始化ID要和图片列表最外面的ID保持一致
2、<ul>标签外必须包裹一个div且class必须为pic

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP