最近产品突然就来个需求,要加轮播图,而且是立马要上线,于是乎发现了一个超级简便好用的轮播图插件myFocus,而且myFocus提供很多种风格,可以选择。

这里是使用说明 http://www.chhua.com/myfocus/usage.html

需要注意的是,链接上的下载地址现在好像都不能下了,这里提供一个可用的 http://pan.baidu.com/share/link?shareid=3334234060&uk=2770847228&fid=462584438087038

你可以自行看上面,或者看以下内容。

myFocus的标准风格使用,只需简单3步(1.2.0版本开始支持jQuery):

1、引入js css文件(另外,如果想支持jQuery调用的话,请先引入jQuery库,再引入myFocus库即可)

<link rel="stylesheet" href="{SITE_THEME}js/mf-pattern/mF_fancy.css"/>
<script type="text/javascript" src="{SITE_THEME}js/myfocus-2.0.1.min.js"></script>

2、使用标准的(myFocus)html结构

<div id="boxID" style="visibility:hidden"><!--焦点图盒子-->
<div class="loading"><span>请稍候...</span></div><!--载入画面(可删除)-->
<ul class="pic"><!--内容列表-->
<li><a href="#"><img src="img/1.jpg" thumb="" alt="标题1" text="详细描述1" /></a></li>
<li><a href="#"><img src="img/2.jpg" thumb="" alt="标题2" text="详细描述2" /></a></li>
<li><a href="#"><img src="img/3.jpg" thumb="" alt="标题3" text="详细描述3" /></a></li>
<li><a href="#"><img src="img/4.jpg" thumb="" alt="标题4" text="详细描述4" /></a></li>
<li><a href="#"><img src="img/5.jpg" thumb="" alt="标题5" text="详细描述5" /></a></li>
</ul>
</div>

3、调用myfocus

//最基本的(其他范例可以查看上面提供的链接)
<script type="text/javascript">
myFocus.set({
id:'boxID'

}); </script>

然后,就完成了。  

myFocus可以选择风格,但是会导致加载比较慢。最简单直接的方法,就是直接根据自己的风格加载相应 css js

myFocus 焦点图/轮播插件的更多相关文章

  1. KinSlideshow焦点图轮播插件

    KinSlideshow默认设置效果代码: *焦点图显示的标题为 img 中 alt 属性中的文字 *当只有一张图片时不显示按钮,但也会有无缝切换效果 * jquery ..以上版本 jvascrip ...

  2. jQuery制作焦点图(轮播图)

    焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  3. 原生JavaScript实现焦点图轮播

    不管是高校的网站还是电商的页面,焦点图的切换和轮播应该是一项不可或缺的应用.今天把焦点图轮播制作的技术要点做下笔记,以供日后查看. 一.结构层(HTML) 焦点图的HTML结构很简单,就是一个父容器( ...

  4. 基于jQuery游戏网站焦点图轮播特效

    基于jQuery的一款游戏网站焦点图轮播特效.这是一款带进度条定时切换,带缩略图切换的jQuery网站焦点图代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <cente ...

  5. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

  6. JS实现焦点图轮播效果

    大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...

  7. JavaScript基础 -- 焦点图轮播(转载)

    首先将HTML结构搭建好: <div id="container"> <div id="list" style="left: -60 ...

  8. 8种效果实例-jQuery anoSlide 焦点图轮播

    anoslide是一款可调节效果至任意宽度大小,支持图文混合内容显示的图片轮播插件. 在线实例 单个 多个 动画延迟 自动播放 显示分页 显示标题 延迟加载 自适应高度 使用方法 <div cl ...

  9. [Js]焦点图轮播效果

    一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 二.结构和样式 <div id="banner" class=&q ...

随机推荐

  1. java SE 入门之语言与环境(第一篇)

    Javase的语言与开发环境Keke2016年03月08日 Java属于-Oracle公司(甲骨文)创始人:Gosling1995年诞生1998年12月发布jdk1.22002年2月发布:jdk1.4 ...

  2. execl中设置的格式无法实现

    在一次项目中,需要导出execl表,并且要给表中的表格设置格式,因为每列的格式都不一样,需要单独设置设置这些格式,在后期使用中因为导入的数据过多,是的后面的单元格中设置的格式无法实现. 每次打开exe ...

  3. Java虚拟机基础知识你知道多少?

    http://www.cnblogs.com/qlky/p/7401841.html java虚拟机结构 http://liuwangshu.cn/java/jvm/1-runtime-data-ar ...

  4. ASP.NET Core 2 学习笔记(十二)REST-Like API

    Restful几乎已算是API设计的标准,通过HTTP Method区分新增(Create).查询(Read).修改(Update)和删除(Delete),简称CRUD四种数据存取方式,简约又直接的风 ...

  5. confirm(message)

    如果用户点击确定按钮,则 confirm() 返回 true.如果点击取消按钮,则 confirm() 返回 false. 在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入 ...

  6. grafana 安装- 曲线图展示每秒新增数据量

    下载: https://dl.grafana.com/oss/release/grafana-5.4.2.windows-amd64.zip 解压就能用 添加数据源 添加查询条件 sql 模式编写查询 ...

  7. php 判断字符串长度和字符串为纯数字字符串

    <?php $str="123456a"; $str_a=123456"; if(is_numeric($str)){ 返回 false }else{ 返回 tru ...

  8. UEditor百度网页编辑器JSP版配置与调试

    最近用公司后台时发现那编辑器还难用,就想着给它换一个.在网上找了下资料也对比了一下,后决定用百度的UEditor. 在UEditor官网下载了一个开发版1.4.3.3Jsp 版本UTF-8编码的压缩包 ...

  9. ArcGIS10.3+Oracle12C+ArcGIS Server10.3安装布署(之二)

    1.创建PDB 输入 dbca 命令 2.安装完成后,连接PDBSDE的容器数据库 3.环境变量 从Oracle的官方网站下载   instantclient-basic-nt-12.1.0.2.0. ...

  10. keras Lambda 层

    Lambda层 keras.layers.core.Lambda(function, output_shape=None, mask=None, arguments=None) 本函数用以对上一层的输 ...