怎么使用focus插件制作动态图册

最新推荐文章于 2024-09-24 18:09:15 发布

原创最新推荐文章于 2024-09-24 18:09:15 发布 · 670 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#脚本 #js

html 同时被 2 个专栏收录

4 篇文章

订阅专栏

4 篇文章

订阅专栏

本文介绍了如何利用focus插件来制作动态图册。首先，你需要从提供的链接下载该插件，接着将详细讲解如何操作和应用这个插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先要先下载focus插件下载链接（很难找的）：http://pan.baidu.com/s/1ntKJrXR

然后接下来就是怎么使用它：

<script type="text/javascript" src="js/myfocus-1.2.0.full.js"></script> //引入js

html代码：

<span style="white-space:pre">	</span>      <div id="center_index_pic">
<span style="white-space:pre">	</span>    <span style="white-space:pre">	</span> <span style="white-space:pre">	</span><ul class="pic">
<span style="white-space:pre">					</span><li><a href="#"><img src="image/image01.jpg" alt="我想要健康的身体" text="我想要健康的身体"/></a></li>
<span style="white-space:pre">					</span><li><a href="#"><img src="image/image02.jpg" alt="我想要魔鬼的身材" text="我想要魔鬼的身材"/></a></li>
<span style="white-space:pre">					</span><li><a href="#"><img src="image/image03.jpg" alt="我想要品质的生活" text="我想要品质的生活"/></a></li>
<span style="white-space:pre">					</span><li><a href="#"><img src="image/image04.jpg" alt="我想要自由" text="我想要自由"/></a></li>
<span style="white-space:pre">	</span>   <span style="white-space:pre">			</span></ul>
<span style="white-space:pre">	</span>    <span style="white-space:pre">	</span></div>

注意： ul里边的class=“pic”不能省略

js代码：

$(function(){
<span style="white-space:pre">	</span>//首页pic特效
<span style="white-space:pre">	</span>$('#center_index_pic').myFocus({
<span style="white-space:pre">			</span>pattern:'mF_liquid',//风格样式
<span style="white-space:pre">			</span>trigger:'mouseover',//触发切换模式['click'(鼠标点击)|'mouseover'(鼠标悬停)]
<span style="white-space:pre">			</span>txtHeight:'default',//文字层高度设置['default'(默认高度)|0(隐藏)|num(数字,单位像素)]
<span style="white-space:pre">			</span>wrap:false,//是否保留边框(有的话)[true|false]
<span style="white-space:pre">			</span>auto:true,//是否自动播放[true|false]
<span style="white-space:pre">			</span>time:3,//每次停留时间[num(数字,单位秒)]
<span style="white-space:pre">			</span>index:0,//开始显示的图片序号(从0算起)[num(数字)]
<span style="white-space:pre">	</span>});
<span style="white-space:pre">	</span>
})