轮播图--myFocus

最新推荐文章于 2021-01-14 08:54:38 发布

erdouzhang

最新推荐文章于 2021-01-14 08:54:38 发布

阅读量907

点赞数 1

CC 4.0 BY-SA版权

分类专栏：轮播

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/55100592

轮播专栏收录该内容

4 篇文章

订阅专栏

本文介绍myFocus轮播插件的安装步骤及使用方法，包括如何配置基本属性和选择不同风格，同时提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完整文件代码： https://github.com/erdouzhang/myFocus
轮播在线展示：https://erdouzhang.github.io/myFocus/
各种风格展示：http://www.jq22.com/yanshi12422

myFocus插件下载

step1.页面引入相关文件

这里写图片描述

<link rel="stylesheet" href="lib/mf-pattern/mF_slide3D.css">
<script src="lib/myfocus-2.0.4.min.js"></script>
<script src="lib/mf-pattern/mF_slide3D.js"></script>

step2.写html结构、js

这里写图片描述
css样式如下:

<style type="text/css">
    #boxID {
        width: 560px;/*盒子的宽度和高度根据图片大小来设置*/
        height: 300px;
        margin: 0 auto;
        padding-top: 100px;
    }
    </style>

html结构、简单js 如下:

<body>
    <div id="boxID"> /*如果boxID外面还有盒子包裹(只包裹boxID)，那么就不要给外面包裹的盒子高度*/
        <!--焦点图盒子-->
        <div class="loading"><img src="img/1m.jpg" height="300" width="560" alt="请稍候..." /></div>
        <!--载入画面(可删除)-->
        <div class="pic">
            <!--内容列表(li数目可随意增减)-->
            <ul>
                <li>
                    <a href="#"><img src="img/1m.jpg" height="300" width="560" thumb="" alt="标题1" text="详细描述1" /></a>
                </li>
                <li>
                    <a href="#"><img src="img/2m.jpg" height="300" width="560" thumb="" alt="标题2" text="详细描述2" /></a>
                </li>
                <li>
                    <a href="#"><img src="img/3m.jpg" height="300" width="560" thumb="" alt="标题3" text="详细描述3" /></a>
                </li>
                <li>
                    <a href="#"><img src="img/4m.jpg" height="300" width="560" thumb="" alt="标题4" text="详细描述4" /></a>
                </li>
                <li>
                    <a href="#"><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',//风格应用的名称比如'mF_YSlider'等
    time:3,//切换时间间隔(秒)
    trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
    width:450,//设置图片区域宽度(像素)
    height:296,//设置图片区域高度(像素)
    txtHeight:'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏
});
</script>