25yicms利用ASP.NET(C#)+MSSQL技术全力打造功能最强大的营销型企业网站管理系统,企业做网站系统,做网站软件,提供div+css企业网站模板。
阅读内容

使用myfocus实现高效幻灯片效果


时间:2012/09/27   来源:CMS

我们在进行网站制作时,对于一些网站需要图片轮换也就是幻灯片效果曾出现很多种不同的效果,这些不同的效果却要使用不同的功能代码。所以有时我们为了应对不同的效果体现,需要把这些不同的效果功能代码保存起来,以备不时之需。但是现在myfocus的出现,同一套功能代码,在网站中只需要加载一个js文件,myFocus v2.0.min版只有9.89KB,它却可以实现以前网页上出现不同的幻灯片效果风格。这对于网页制作者来说是一个福音,从此我们不需要东找西找这些效果代码来满足客户的不同幻灯片效果需求,现在只需要利用一种代码既可轻松使现。

现在我们来讲解如何正确使用myfocus实现高效幻灯片效果。

首先我们需要下载myFocus风格应用,myFocus风格应用包含两种:一种是min精简压缩版;另一种是无压缩原版。这两种风格的下载地址如下:
http://myfocus-js.googlecode.com/svn/trunk/myfocus-2.0.1.min.js(min版本,9.93KB)
http://myfocus-js.googlecode.com/svn/trunk/myfocus-2.0.1.full.js(full版本,20.3KB)

网页页面使用代码参考:
<script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script><!--引入myFocus库-->
<script type="text/javascript">
myFocus.set({
    id:'myFocus',//焦点图盒子ID
    pattern:'mF_tbhuabao',//风格应用的名称
    time:3,//切换时间间隔(秒)
    trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
    width:940,//设置图片区域宽度(像素)
    height:430,//设置图片区域高度(像素)
    txtHeight:'0'//文字层高度设置(像素),'default'为默认高度,0为隐藏
});
</script>
<div id="myFocus"><!--焦点图盒子-->
<div class="pic"><!--图片列表-->
<ul>
<li><a href="#1"><img src="images/01.jpg" /></a></li>
<li><a href="#2"><img src="images/02.jpg" /></a></li>
</ul>
</div>
</div>

把下载到的版本放到js文件夹中,然后在网页中只需要加载myfocus-2.0.1.min.js就可以了。我们要实现不同的风格只需要修改:pattern属性,同时我们还可以在下载到的版本放到js的文件夹中找到mf-pattern文件夹,对相应的风格文件进行修改既可:如mF_tbhuabao风格,我们就可以修改mF_tbhuabao.css文件样式表或者mF_tbhuabao.js文件js控制。

怎么样?使用myfocus实现高效幻灯片效果这样一讲是不是很简单呢?

点击次数:       打印此页  关闭