js基于myFocus实现轮播图效果

本文实例为大家分享了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不会再寻找导入的样式文件，而是直接在页面上读取。

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