zoukankan      html  css  js  c++  java
  • js幻灯片插件(简单易用)

    平时做项目总是会用到幻灯片功能,网上已经有了很多插件,但是都要配置js引用,css样式,html代码,很是麻烦,不好用,或许是自己太懒了,就希望有一款可以尽量少配置代码的slide插件,于是萌发了自己写的念头。

    代码提交到了我的GitHub里。

    下载地址:https://github.com/mahatmasmile/slide

    此插件依赖jquery包。

    此插件支持同一个页面多个幻灯片。

    具体使用方法如下:

    js:

    <script src="js/jquery-1.7.0.min.js"></script>
    <script src="js/jquery.slide-1.0.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    varpicurls={//图片连接
    'p1':'img/001.jpg',
    'p2':'img/002.jpg',
    'p3':'img/003.jpg',
    'p4':'img/004.jpg',
    'p5':'img/005.jpg',
    'p6':'img/001.jpg',
    'p7':'img/002.jpg',
    'p8':'img/003.jpg',
    'p9':'img/004.jpg',
    'p10':'img/005.jpg',
    };
    varurls={//每张图片对应的超链接
    'u1':'http://www.baidu.com/s?wd=1',
    'u2':'http://www.baidu.com/s?wd=2',
    'u3':'http://www.baidu.com/s?wd=3',
    'u4':'http://www.baidu.com/s?wd=4',
    'u5':'http://www.baidu.com/s?wd=5',
    'u6':'http://www.baidu.com/s?wd=6',
    'u7':'http://www.baidu.com/s?wd=7',
    'u8':'http://www.baidu.com/s?wd=8',
    'u9':'http://www.baidu.com/s?wd=9',
    'u10':'http://www.baidu.com/s?wd=10',
    };
    varlabels={//底部黑色标签对应的文本内容
    'l1':'图片一',
    'l2':'图片二',
    'l3':'图片三',
    'l4':'图片四',
    'l5':'图片五',
    'l6':'图片六',
    'l7':'图片七',
    'l8':'图片八',
    'l9':'图片九',
    'l10':'图片十',
    };
    $("#slide_box").slide({//幻灯片层的ID,前面“井”号不能删除
    'second':5,//多少秒翻页
    'width':600,//每张图片的宽
    'height':300,//每张图片的高
    'pc':5,//一共多少张图片
    'picurls':picurls,//看不懂就别动
    'target':'blank',//在新页面打开超链接,默认是本页面
    'urls':urls,//看不懂就别动
    'labels':labels//看不懂就别动
    });
    $("#slide_box1").slide({//幻灯片层的ID,前面“井”号不能删除
    'second':5,//多少秒翻页
    'width':700,//每张图片的宽
    'height':350,//每张图片的高
    'pc':7,//一共多少张图片
    'picurls':picurls,//看不懂就别动
    'urls':urls,//看不懂就别动
    'labels':labels//看不懂就别动
    });
    $("#slide_box2").slide({//幻灯片层的ID,前面“井”号不能删除
    'second':5,//多少秒翻页
    'width':1000,//每张图片的宽
    'height':500,//每张图片的高
    'pc':10,//一共多少张图片
    'picurls':picurls,//看不懂就别动
    'urls':urls,//看不懂就别动
    'labels':labels//看不懂就别动
    });
    });
    </script>

     

    html:

    <div id="slide_box" ><!--幻灯片的层1-->
    </div> 
                                       
    <div id="slide_box1" ><!--幻灯片的层2-->
    </div> 
                                       
    <div id="slide_box2" ><!--幻灯片的层3-->
    </div>

    幻灯片(slide_box)层内什么都不用写,全部自动生成。

    以上是一个页面三个幻灯片的写法,可以根据自己的需要,增减代码。

    这只是初期的,样式和功能比较单一,没有显示效果的选择,也过渡的快慢等等功能。

    效果:

  • 相关阅读:
    linux学习笔记28--监控命令vmstat,iostat, lsof
    linux学习笔记27--监控命令ps和top,free
    linux学习笔记26--命令wc
    linux学习笔记24---命令grep
    linux学习笔记23--时间命令date和cal
    linux学习笔记22---命令diff和diff3
    linux学习笔记22--命令ln
    Fiddler 抓取 ios 端数据包
    fiddler 清除证书+重新添加证书
    Fiddler 详尽教程与抓取移动端数据包
  • 原文地址:https://www.cnblogs.com/mahatmasmile/p/2867155.html
Copyright © 2011-2022 走看看