漂亮的轮播图插件myFocus
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍使用myFocus插件制作漂亮的轮播图效果，myFocus集成了30多种风格图片切换效果，体积小，使用简单。myFocus使用原生JS编写，文件小巧却高效强大。

IMG标签的属性说明：

  • src : 图片地址；

  • thumb : 图片的略缩图地址(需要风格支持，可以省略，如果省略即把大图地址作为它的地址)；

  • alt : 图片的描述文字；

  • text : 图片更详细的描述文字(需要风格支持，可以省略)

主要js与解析

纯文本
点击复制
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script type="text/javascript">
myFocus.set({
id: 'myFocus', //焦点图盒子ID
pattern: 'mF_fancy', //风格应用的名称
time: 3, //切换时间间隔(秒)
trigger: 'click', //触发切换模式:'click'(点击)/'mouseover'(悬停)
width: 1000, //设置图片区域宽度(像素)
height: 300, //设置图片区域高度(像素)
txtHeight: 'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏
});
</script>
<script type="text/javascript"> myFocus.set({ id: 'myFocus', //焦点图盒子ID pattern: 'mF_fancy', //风格应用的名称 time: 3, //切换时间间隔(秒) trigger: 'click', //触发切换模式:'click'(点击)/'mouseover'(悬停) width: 1000, //设置图片区域宽度(像素) height: 300, //设置图片区域高度(像素) txtHeight: 'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏 }); </script>
Expand
<script type="text/javascript">
    myFocus.set({
        id: 'myFocus', //焦点图盒子ID
        pattern: 'mF_fancy', //风格应用的名称 
        time: 3, //切换时间间隔(秒)
        trigger: 'click', //触发切换模式:'click'(点击)/'mouseover'(悬停)
        width: 1000, //设置图片区域宽度(像素)
        height: 300, //设置图片区域高度(像素)
        txtHeight: 'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏
    });
</script>