lantern-slide v1.0.0

自制简易幻灯片插件

效果图

简介

随手自制的一个简易幻灯片插件

入口js为image.main.min.js，入口css为image.style.min.css

更新

• 1.0.0 - 『简易幻灯片插件』
• 1.1.0 - 『增加轮播淡入淡出效果』

使用

为了适配移动端，请在头部加上如下语句

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

头部引入文件

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.min.css"/>
<script src="js/image.main.min.js"></script>

在body内引入这段html代码(body作为引入html代码的父元素)

<div class="pic-box pic-box-hide">
    <div class="pic-back"></div>
    <div class="pic-button">
        <span class="pic-icon play-stop">
            <i class="fa fa-play fa-lg pic-play"></i>
            <i class="fa fa-pause fa-lg pic-stop"></i>
        </span>
        <span class="pic-icon">
            <i class="fa fa-television fa-lg pic-fullscreen"></i>
        </span>
        <span class="pic-icon">
            <i class="fa fa-close fa-lg pic-close"></i>
        </span>                    
    </div>
    <div class="pic-arrow pic-left">
        <i class="fa fa-arrow-left fa-lg"></i>
    </div>
    <div class="pic-arrow pic-right">
        <i class="fa fa-arrow-right fa-lg"></i>
    </div>
    <img class="pic-img">
</div>

为想要作为幻灯片元素的img标签加上 class="img-slide"(img可处于body内的任意位置)

<img src="https://mikuimg.oss-cn-shenzhen.aliyuncs.com/background/null-206187d85a18c16b.jpg" class="img-slide">
<img src="https://mikuimg.oss-cn-shenzhen.aliyuncs.com/background/null43e54b18e61b6b64.jpg" class="img-slide">

body后引入如下js代码

showPictureBox({

    // 轮播间隔时间，单位为毫秒(不填或不传参则默认3000毫秒)，毫秒数大于4000效果更佳
    delay:3000

})

vue使用

在image.main.min.js末尾添加export default showPictureBox;

在所需组件内引入import showPictureBox from "./xxx/image.main.min.js

在main.js引入import './xxx/style.min.css'

在相应的组件调用showPictureBox函数并传入配置参数即可

兼容性

IE10以上浏览器

下载

git clone https://github.com/MikuBlog/lantern-slide.git