开发者社区> 进击的悠然> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

轮播图插件myFocus使用

简介: myFocus官网下载源码,本文是v2.0.1版,解压后如下 将js包内文件拷入工程 在工程内引入 后两者可以自行挑选样式,是配对的即可。 ...
+关注继续查看

myFocus官网下载源码,本文是v2.0.1版,解压后如下

将js包内文件拷入工程

在工程内引入

<script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>
    <script src="js/mf-pattern/mF_taobao2010.js" type="text/javascript"></script>
    <link rel="stylesheet" href="js/mf-pattern/mF_taobao2010.css" type="text/css">

后两者可以自行挑选样式,是配对的即可。

<div class="ad" id="picBox">
            <dic class="pic">
                <ul>
                    <li><img src="images/ad2.jpg" alt=""></li>
                    <li><img src="images/ad3.jpg" alt=""></li>
                    <li><img src="images/ad4.jpg" alt=""></li>
                </ul>
            </dic>
        </div>

其中ul必须通过一个div class="pic"包裹

然后js初始化

<script>
        myFocus.set({
            id:'picBox'
        })
    </script>
//你可以简单的调用---只设置它的盒子id,其它参数全部默认设置:
<script type="text/javascript">
myFocus.set({id:'boxID'});
</script>

//或详细一点的参数调用:
<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>
为防止加载过久可以加入loading图
<div class="ad" id="picBox">
            <div class="loading">
                <img src="images/loading.gif" alt="图片加载中"/>
            </div>
            <dic class="pic">
                <ul>
                    <li><img src="images/ad2.jpg" alt=""></li>
                    <li><img src="images/ad3.jpg" alt=""></li>
                    <li><img src="images/ad4.jpg" alt=""></li>
                </ul>
            </dic>
        </div>

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
云安全从业者知识框架快速搭建---阿里云MVP唐俊飞资源安全专家
唐俊飞,15年网络和信息安全领域从业经验,具有较强的网络安全管理、建设和维护、管理咨询和技术评估实战项目经验,曾就职于联通、绿盟,以及自主创业。现主要担任CISSP(国际注册信息系统安全专家认证)、CISP(国家注册信息安全人员认证)、信息安全管理、渗透测试、等级保护、网络安全防护体系等。 以下是唐俊飞的安全系列干货文章,为开发者点亮明灯,避开弯路,干货满满,赶紧收藏!
461 0
【STM32 .Net MF开发板学习-05】PC通过Modbus协议远程操控开发板
本示例包含两部分,一部分运行到开发板上,作为Modbus RTU Slave服务存在;另一部分典型的.Net Framework代码,实现了Modbus RTU Client端功能,可以借助开发板上的Slave服务控制开发板上的LED灯和获取按钮状态。
571 0
vuejs计算属性、Methods及Watched属性
https://www.cnblogs.com/pengshadouble/p/7403217.html
754 0
JS导出PDF插件(支持中文、图片使用路径)
原文:JS导出PDF插件(支持中文、图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题。它的效果可以先到http://pdfmake.org/playground.html查看。
1970 0
AngularJS driective 封装 自动滚动插件
1.ui-smooth-scroll.js文件内容 angular.module('app') .directive('uiSmoothScroll', ['$location', '$anchorScroll', function($location, $anchorScroll)...
1040 0
淘宝轮播图带前后按钮
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
774 0
【STM32 .Net MF开发板学习-05】PC通过Modbus协议远程操控开发板
从2002年就开始接触Modbus协议,以后陆续在PLC、DOS、Windows、.Net Micro Framework等系统中使用了该协议,在我以前写的一篇博文中详细记载了这一段经历,有兴趣的朋友可以看一看《我的Modbus Slave/Client开发历程(Rtu/AscII/Tcp)》。
630 0
+关注
进击的悠然
hello world~
20
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载