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实现禁止后退的方法
Dec 27 Javascript
javascript 兼容鼠标滚轮事件
Apr 07 Javascript
通用javascript脚本函数库 方便开发
Oct 13 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
js变量提升深入理解
Sep 16 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 Javascript
JS实现可控制的进度条
Mar 25 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
php下将XML转换为数组
2010/01/01 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
js 操作符汇总
2014/11/08 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
PHP7新特性简述
2017/06/11 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
浅析python的Lambda表达式
2019/02/27 Python
python列表返回重复数据的下标
2020/02/10 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
婚礼新郎父母答谢词
2014/01/16 职场文书
自我反省检讨书
2014/01/23 职场文书
银行优秀员工事迹
2014/02/06 职场文书
2014年减负工作总结
2014/12/10 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
资产移交协议书
2016/03/24 职场文书