手机版

js基于myFocus实现轮播图效果

时间:2021-09-06 来源:互联网 编辑:宝哥软件园 浏览:

本文实例为大家分享了myFocus轮播图的具体代码,供大家参考,具体内容如下

完整文件及代码:https://github.com/erdozhang/slider-my focus

第一步。页面引入相关文件

这里写图片描述

链接rel='样式表href=' lib/mF-pattern/mF _ slide 3d。CSS ' rel='外部' nofollow '脚本src=' http : lib/my focus-2。0 .4 .量滴js '/script script src=' http : lib/mF-pattern/mF _ slide 3d。js '/脚本步骤2 .写超文本标记语言结构、js

钢性铸铁样式如下:

样式类型=' text/CSS ' # BoxID { width : 560 px;高: 300pxmargin: 0自动填充-top : 100 px;} /stylehtml结构、简单射流研究…如下:

body div id='boxID '!-焦点图盒子-div class=' loading ' img src=' http : img/1m。jpg ' height=' 300 ' width=' 560 ' alt='请稍候.//div!-载入画面(可删除)- div class='pic '!-内容列表(李数目可随意增减)- ul阿利href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img src=' http : img/1m。jpg ' height=' 300 ' width=' 560 ' thumb=' alt='标题1' text='详细描述1 '/a/李阿利href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img src=' http : img/2m。jpg ' height=' 300 ' width=' 560 ' thumb=' alt='标题2' text='详细描述2 '/a/李阿利href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img src=' http : img/3m。jpg ' height=' 300 ' width=' 560 ' thumb=' alt='标题3' text='详细描述3 '/a/李阿利href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img src=' http : img/4m。jpg ' height=' 300 ' width=' 560 ' thumb=' alt='标题4' text='详细描述4 '/a/李阿利href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img src=' http : img/5m。jpg ' height=' 300 ' width=' 560 ' thumb=' alt='标题5' text='详细描述5 '/a/Li/ul/div/div脚本src=' http : lib/my focus-2。0 .4 .量滴js /脚本脚本src=' http : lib/mF-pattern/mF _ slide 3d。js /脚本!-你可以简单的调用-只设置它的盒子id,其它参数全部默认设置:-脚本类型=' text/JavaScript '我的重点。set({ id : ' BoxID ',pattern : ' mF _花式' });/script/bodyjs代码还可以更详细点如下:

脚本类型=' text/JavaScript '我的重点。set({ id : ' BoxID ',//焦点图盒子ID pattern:'mF_fancy ',//风格应用的名称time:3,//切换时间间隔(秒)trigger: "点击",//触发切换模式:"点击"(点击)/“鼠标悬停在”(悬停)宽度:450,//设置图片区域宽度(像素)高度:296,//设置图片区域高度(像素)txtHeight: '默认'//文字层高度设置(像素),"默认"为默认高度,0为隐藏});/script效果图:

这里写图片描述

风格文件是不需要在使用时手动引入,myFocus会根据你的模式设置,寻找myFocus库文件目录下的中强音模式目录,当找到相应的风格文件后,自动引入。

这样,你只需要把你的风格文件放在myFocus库文件目录下的中强音模式目录内,即可实现自动引入机制。

例如,你的myFocus-2.0.0.min.js文件放在射流研究…目录,那么,只需在射流研究…目录内建立一个中强音模式的子目录,这个子目录便是myFocus程序可以识别的存放风格文件的目录。

在中强音模式目录中,也存在一个img的子目录,它是存放某些风格的图片文件,虽然并不是每款风格都会有图片文件。

建议把所有的风格文件都存放在这个中强音模式目录,这样你就可以随意切换你的风格了,而且它是按需加载,并不会引入其它多余的文件我的焦点的整个加载量(主库风格)平均只有12KB左右。

另外需要注意的是,这种自动导入机制足够智能,不会重复导入样式文件。例如,当您已经手动导入了样式文件,或者只是在页面上编写某个样式的js代码时,myFocus不会再寻找导入的样式文件,而是直接在页面上读取。

以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。

版权声明:js基于myFocus实现轮播图效果是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。