易风图片轮播插件

本插件是一个基于jquery的轮播图插件！

安装

1. 使用npm安装

npm i yf-banner-libs

2. 源码安装

git仓库地址：https://gitee.com/yifengketang/yfbanner.git

使用

使用时，要另外引入jquery和core-js。

`jquery`和`core-js`的获取

1. CDN

获取网站：https://www.bootcdn.cn/

2. 通过npm安装

npm i --save install

安装后，到node_modules目录获取对应的库文件。

yfbanner的使用

引入

<script src="https://cdn.bootcss.com/core-js/2.6.9/core.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="./yfbanner.js"></script>

创建轮播

mybanner.createBanner("#yfbanner",{
    auto:true,//是否开启自动轮播
    time:1000,//轮播速度，单位：毫秒
    animate:"fade"//动画，动画类型可选值：left和fade
    });

图片轮播的基本页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>易风课堂-图片轮播</title>
    <style>
    body{margin:0;padding:0;}
    </style>
</head>
<body>
    <!-- 轮播图结构 -->
    <div id="yfbanner">
        <div class="items">
            <div class="item">
                <img src="./images/banner1.jpg" alt="" srcset="">
            </div>
            <div class="item">
                <img src="./images/banner2.jpg" alt="" srcset="">
            </div>
            <div class="item">
                <img src="./images/banner1.jpg" alt="" srcset="">
            </div>
            <div class="item">
                <img src="./images/banner2.jpg" alt="" srcset="">
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/core-js/2.6.9/core.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="./yfbanner.js"></script>
    <script>
        mybanner.createBanner("#yfbanner",{auto:true,time:1000,animate:"fade"});
    </script>
</body>
</html>

易风 / WebPack快速入门-案例2-图片轮播

易风图片轮播插件

安装

1. 使用npm安装

2. 源码安装

使用

`jquery`和`core-js`的获取

1. CDN

2. 通过npm安装

yfbanner的使用

引入

创建轮播

图片轮播的基本页面结构

简介

发行版

贡献者

近期动态

易风 / WebPack快速入门-案例2-图片轮播 .gitee-modal { width: 500px !important; }

易风图片轮播插件

安装

1. 使用npm安装

2. 源码安装

使用

jquery和core-js的获取

1. CDN

2. 通过npm安装

yfbanner的使用

引入

创建轮播

图片轮播的基本页面结构

简介

发行版

贡献者

近期动态

搜索帮助

易风 / WebPack快速入门-案例2-图片轮播

`jquery`和`core-js`的获取