js基于myFocus实现轮播图效果


Posted in Javascript onFebruary 14, 2017

本文实例为大家分享了myFocus轮播图的具体代码,供大家参考,具体内容如下

完整文件及代码: https://github.com/erdouzhang/slider-myFocus

step1.页面引入相关文件

js基于myFocus实现轮播图效果

<link rel="stylesheet" href="lib/mf-pattern/mF_slide3D.css" rel="external nofollow" >
<script src="lib/myfocus-2.0.4.min.js"></script>
<script src="lib/mf-pattern/mF_slide3D.js"></script>

step2.写html结构、js

js基于myFocus实现轮播图效果css样式如下:

<style type="text/css">
 #boxID {
 width: 560px;
 height: 300px;
 margin: 0 auto;
 padding-top: 100px;
 }
 </style>

html结构、简单js 如下:

<body>
 <div id="boxID">
 <!--焦点图盒子-->
 <div class="loading"><img src="img/1m.jpg" height="300" width="560" alt="请稍候..." /></div>
 <!--载入画面(可删除)-->
 <div class="pic">
  <!--内容列表(li数目可随意增减)-->
  <ul>
  <li>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/1m.jpg" height="300" width="560" thumb="" alt="标题1" text="详细描述1" /></a>
  </li>
  <li>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/2m.jpg" height="300" width="560" thumb="" alt="标题2" text="详细描述2" /></a>
  </li>
  <li>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/3m.jpg" height="300" width="560" thumb="" alt="标题3" text="详细描述3" /></a>
  </li>
  <li>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/4m.jpg" height="300" width="560" thumb="" alt="标题4" text="详细描述4" /></a>
  </li>
  <li>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/5m.jpg" height="300" width="560" thumb="" alt="标题5" text="详细描述5" /></a>
  </li>
  </ul>
 </div>
 </div>
 <script src="lib/myfocus-2.0.4.min.js"></script>
 <script src="lib/mf-pattern/mF_slide3D.js"></script> 
 <!-- 你可以简单的调用-只设置它的盒子id,其它参数全部默认设置: -->
 <script type="text/javascript">
 myFocus.set({
 id: 'boxID',
 pattern: 'mF_fancy'
 });
 </script>
</body>

js代码还可以更详细点如下:

<script type="text/javascript">
myFocus.set({
 id:'boxID',//焦点图盒子ID
 pattern:'mF_fancy',//风格应用的名称
 time:3,//切换时间间隔(秒)
 trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
 width:450,//设置图片区域宽度(像素)
 height:296,//设置图片区域高度(像素)
 txtHeight:'default'//文字层高度设置(像素),'default'为默认高度,0为隐藏
});
</script>

效果图:

js基于myFocus实现轮播图效果

风格文件是不需要在使用时手动引入,myFocus会根据你的pattern设置,寻找myFocus库文件目录下的mf-pattern目录,当找到相应的风格文件后,自动引入。

这样,你只需要把你的风格文件放在myFocus库文件目录下的mf-pattern目录内,即可实现自动引入机制。

例如,你的myFocus-2.0.0.min.js文件放在js目录,那么,只需在js目录内建立一个mf-pattern的子目录,这个子目录便是myFocus程序可以识别的存放风格文件的目录。

在mf-pattern目录中,也存在一个img的子目录,它是存放某些风格的图片文件,虽然并不是每款风格都会有图片文件。

建议把所有的风格文件都存放在这个mf-pattern目录,这样你就可以随意切换你的风格了,而且它是按需加载,并不会引入其它多余的文件。myFocus的整个加载量(主库+风格)平均只有12KB左右。

另外需要说明的是,这个自动引入机制已经做的足够智能,它并不会重复引入风格文件,例如当你已经手动引入风格文件,又或者干脆把某风格的js代码写在页面上,这时myFocus并不会再次寻找引入风格文件,而是直接读取页面上的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
JS随机密码生成算法
Sep 23 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
javascript 单例模式详解及简单实例
Feb 14 #Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 #Javascript
微信小程序 弹幕功能简单实例
Feb 14 #Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 #Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 #Javascript
用file标签实现多图文件上传预览
Feb 14 #Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 #Javascript
You might like
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
Python实现周期性抓取网页内容的方法
2015/11/04 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
python 动态加载的实现方法
2017/12/22 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
PyTorch基本数据类型(一)
2019/05/22 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
努比亚手机官网:nubia
2016/10/06 全球购物
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
复古服装:RetroStage
2019/05/10 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
经典演讲稿范文
2013/12/30 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
小学生获奖感言范文
2014/02/02 职场文书
岗位说明书范文
2014/05/07 职场文书
青安岗事迹材料
2014/05/14 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
初中班主任工作总结2015
2015/05/13 职场文书