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 相关文章推荐
JS 显示当前日期与时间的代码
Mar 24 Javascript
jquery中this的使用说明
Sep 06 Javascript
JS常用函数使用指南
Nov 23 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
react 路由Link配置详解
Nov 11 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缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php mysql数据库操作类
2008/06/04 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
js读取本地excel文档数据的代码
2010/11/11 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
js实现拖拽效果
2015/02/12 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
python实现括号匹配的思路详解
2018/08/23 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
业务员岗位职责范本
2013/12/15 职场文书
医院工作检讨书范文
2014/02/10 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
服装设计师求职信
2014/06/04 职场文书
七一党日活动总结
2014/07/08 职场文书
评职称个人总结
2015/03/05 职场文书
大学生暑期实践报告
2015/07/13 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL