强大的js焦点图插件myFocus(完整版)

所属分类:媒体-幻灯片和轮播图

 12052  143  查看评论 (28)
强大的js焦点图插件myFocus(完整版) ie兼容6

myFocus

myFocus是一个专注于WEB端焦点图/轮换图的JS库。该焦点图插件集成了30多种风格图片切换效果,体积小,使用简单,兼容ie6+和所有的主流浏览器。myFocus焦点图插件的特点还有:

原生JS编写,独立无依赖性能卓越,同样效果比jQuery更流畅简单易用,傻瓜式API和标准HTML结构效果华丽,媲美Flash焦点图功能强大,30多种风格切换,支持N种常用设置体积小巧,仅5.93KB(minified & gzipped)支持 IE6+ / Chrome / Firefox 等现代浏览器支持自定义开发扩展 

使用方法

在页面中引入样式文件myfocus-2.0.4.min.js文件。

<script src="myfocus-2.0.4.min.js"></script>

HTML结构

myFocus焦点图的HTML结构如下:

<!-- 焦点图盒子 -->
<div id="boxID">
	<!-- 载入中的Loading图片(可选) -->
	<div class="loading">
		<img src="img/loading.gif" alt="请稍候..." />
	</div>
	<!-- 内容列表 -->
	<div class="pic">
		<ul>
			<li>
				<a href="#">
					<img src="img/1.jpg" alt="标题1" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="img/2.jpg" alt="标题2" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="img/3.jpg" alt="标题3" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="img/4.jpg" alt="标题4" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="img/5.jpg" alt="标题5" />
				</a>
			</li>
			<!-- 你可以根据需要添加更多的列 -->
		</ul>
	</div>
</div>

img标签的属性说明:

src:图片地址thumb: 图片的略缩图地址(需要风格支持,可以省略,如果省略即把大图地址作为它的地址)

alt: 图片的描述文字text:图片更详细的描述文字(需要风格支持,可以省略) 

初始化插件

可以通过下面的方法来初始化myFocus焦点图插件。

myFocus.set({id: 'boxID'});

或者在初始化时设置配置参数:

myFocus.set({
	id: 'boxID',
	//焦点图盒子ID   
	pattern: 'mF_tbhuabao',
	//焦点图风格的名称   
	time: 3,
	//切换时间间隔(秒)  
	trigger: 'mouseover',
	//触发切换模式:'click'(点击)/'mouseover'(悬停)   
	delay: 200,
	//'mouseover'模式下的切换延迟(毫秒)   
	txtHeight: 'default' / 标题高度设置 (像素),
	'default'为默认CSS高度,0为隐藏
});

请到 dist 目录下载 myfocus 的min版(压缩)或full版(无压缩),并在子目录“mf-pattern”选择风格下载。

相关插件-幻灯片和轮播图

原生js轮播图插件Image Slider

原生js轮播图插件Image Slider 提供8种轮播特效,轻量级只有16k.
  幻灯片和轮播图
 11974  71

仿百度经验的图文帮助中心轮播

仿百度经验的图文帮助中心轮播,自己设置修改样式就能用
  幻灯片和轮播图
 8333  52

jQuery手机触屏滑动的响应式图片轮播效果

jQuery响应式图片插件,多种图片滑动轮播切换,兼容手机端的触屏滑动图片切换代码。
  幻灯片和轮播图
 14188  108

jQuery炫酷的相册幻灯

jQuery炫酷的相册幻灯
  幻灯片和轮播图
 11935  123

讨论这个项目(28)回答他人问题或分享插件使用方法奖励jQ币

    栾明泽 0
    2017/12/7 13:48:40
    Family 0
    2017/11/14 9:27:14
    sfvzy 0
    2017/8/21 10:56:05
    La vida 0
    2017/8/2 9:26:33
    豆芽长心上 0
    2017/7/30 9:39:24

    怎么下载,作者,我需要JQ币,只要一个就行

        栾明泽0
        2017/12/7 13:51:35

        发布资源、回答他人提问、分享插件使用方法奖励jQ币

        cnarrow0
        2018/1/19 8:27:08

        我也缺少jq币

    回复
    蒜苗丶 0
    2017/6/21 18:57:21
    刹那芳华 0
    2017/5/18 14:37:33

    功能看着挺不错的

    回复
    米拉 0
    2017/5/8 20:27:01
    YSY 0
    2017/4/29 16:15:47

     怎么使用单独一种效果 

        你懂得1
        2017/10/19 13:39:28

        myFocus.set({id: 'boxID',pattern: 'mF_tbhuabao'//焦点图风格的名称  });

    回复
    ??.自? 0
    2017/3/28 15:36:05

    很需要这个东西。真心的好。。

    回复
取消回复