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变强势
Jun 22 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
javascript实现搜索筛选功能实例代码
Nov 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的Yii框架中的Controller控制器
2016/03/29 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
对web.py设置favicon.ico的方法详解
2018/12/04 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
python实现飞机大战项目
2020/03/11 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
QML实现钟表效果
2020/06/02 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
财务主管的岗位职责
2013/12/30 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
会计实训报告范文
2014/11/04 职场文书
工资证明格式模板
2015/06/12 职场文书
运动会5000米加油稿
2015/07/21 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书