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 相关文章推荐
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 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
PHP共享内存用法实例分析
2016/02/12 PHP
奇妙的js
2007/09/24 Javascript
jQuery 动画基础教程
2008/12/25 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
javascript常用方法总结
2015/05/14 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
django实现用户注册实例讲解
2019/10/30 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
父母寄语大全
2014/04/12 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
高温慰问简报
2015/07/21 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书