1.0.1 • Published 4 years ago

yf-banner-libs10 v1.0.1

Weekly downloads
-
License
ISC
Repository
-
Last release
4 years ago

易风图片轮播插件

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

安装

1. 使用npm安装

npm i yf-banner-libs

2. 源码安装

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

使用

使用时,要另外引入jquerycore-js

jquerycore-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>
1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago