Giter Club home page Giter Club logo

myfocus-1's Introduction

myFocus v2.0.4

myFocus是一个专注于WEB端焦点图/轮换图的JS库

特点

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

用法

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>

JS:

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为隐藏
});

查看效果>>

更多效果/详细用法/API,请参考百度“myfocus”>>

下载

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

注意:myfocus 运行时会自动寻找其子目录“mf-pattern”下相应的风格文件,所以“mf-pattern”文件夹一定要存在。

打包下载 myfocus 及它的所有风格文件>>

版本 & 问题

myFocus从v2.0.4开始转移到github,后续版本(如果有)也会在这里更新。

相关问题欢迎在Issues中提出。

myfocus-1's People

Contributors

koen301 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.