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 19 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
js实现省市级联效果分享
Aug 10 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
使用javascript解析二维码的三种方式
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中使用Oracle数据库(5)
2006/10/09 PHP
php $_SERVER当前完整url的写法
2009/11/12 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
JQuery中$之选择器用法介绍
2011/04/05 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
js读取cookie方法总结
2014/10/31 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
Python简单进程锁代码实例
2015/04/27 Python
Python itertools模块详解
2015/05/09 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
python实现数据分析与建模
2019/07/11 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
介绍一下Linux中的链接
2016/06/05 面试题
一些关于MySql加速和优化的面试题
2014/01/30 面试题
毕业生自我鉴定
2013/12/04 职场文书
运动会入场词60字
2014/02/15 职场文书
老师对学生的评语
2014/04/18 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
幼儿园感谢信
2015/01/21 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫