jQuery遮罩弹出层灯箱幻灯片图片切换插件

jQuery遮罩弹出层灯箱幻灯片图片切换插件

一款jQuery点击遮罩弹出灯箱幻灯片图片切换插件是一款非常不错的弹窗大图展示特效,而且同一页面可以多次调用。

使用方法
引入相关jquery.min.js、slide.js文件

1
2
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/slide.js"></script>

JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var options = {
    name: '该项的标题',
    data: [
        { 'title': '标题1', 'img': 'img/demo1.jpg', 'desc': '我是标题1的描述' },
        { 'title': '标题2', 'img': 'img/demo2.jpg', 'desc': '我是标题2的描述' },
        { 'title': '标题3', 'img': 'img/demo3.jpg', 'desc': '我是标题3的描述' },
        { 'title': '标题4', 'img': 'img/demo4.jpg', 'desc': '我是标题4的描述' }
    ]
};
var options1 = {
    name: '希腊房产的标题',
    data: [
        { 'title': '希腊房产1', 'img': 'img/ccf.jpg', 'desc': '我是希腊房产1的描述' },
        { 'title': '希腊房产2', 'img': 'img/20180814151034-1.jpg', 'desc': '我是希腊房产2的描述' },
        { 'title': '希腊房产3', 'img': 'img/gr_20180724142658.jpg', 'desc': '我是希腊房产3的描述' },
        { 'title': '希腊房产4', 'img': 'img/kkq400-263-1.jpg', 'desc': '我是希腊房产4的描述' }
    ]
};
$(function() {
    $('.bg_red').click(function() {
        Slide.run(options);
    });
    $('.bg_blue').click(function() {
        Slide.run(options1);
    });
});

文件信息:

    0

    发表评论