例:
QQ截图20170817104940

下载:js

使用方法:

<link type="text/css" rel="stylesheet" href="galleryview.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.galleryview-2.0.js"></script>
<script type="text/javascript" src="js/jquery.timers-1.2.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#photos').galleryView({
            panel_width: 800,
            panel_height: 300,
            frame_width: 100,
            frame_height: 100,
            easing: 'swing',
            pause_on_hover: true,
            nav_theme: 'light',
            overlay_opacity: 0.5,
            overlay_height: 10
        });
    });
</script>
 <ul id="photos">
    <li><span class="panel-overlay"> 春</span>    <img src="img/01.jpg" /> </li>
    <li><span class="panel-overlay"> 夏</span> <img src="img/02.jpg" /> </li>
    <li><span class="panel-overlay"> 蜗牛</span> <img src="img/03.jpg" /> </li>
    <li><span class="panel-overlay"> 花</span> <img src="img/04.jpg" /> </li>
    <li><span class="panel-overlay"> 秋</span> <img src="img/05.jpg" /> </li>
    <li><span class="panel-overlay"> 浪</span> <img src="img/06.jpg" /> </li>
    <li><span class="panel-overlay"> 泉</span> <img src="img/07.jpg" /> </li>
     <li><span class="panel-overlay"> 冬</span> <img src="img/08.jpg" /> </li>
  </ul>

 

参数(2.0版本)

参考如下:

曾祥展

以上参数可以根据自己需要设置,比如图片大小, 透明度,动画效果,缩略图在左、右、上、下,缩略图箭头大小,是否显示文字描述,是否隐藏某部分啊等等..

jquery validate自定义验证规则

jQuery.validator.addMethod("check_user", function(value, element) { var check = /^[A-Za-z\s]+$/; //this.optional(element)如果元素...

阅读全文

jquery-fancybox JavaScript图片库,支持pc,响应式

官网地址 http://fancyapps.com/fancybox/3/ document:http://fancyapps.com/fancybox/3/docs/#usage github https://github.com/fancyapps/fancybox 兼容性 ...

阅读全文

jquery 瀑布流插件 masonry

github https://github.com/desandro/masonry Masonry Cascading grid layout library Masonry works by placing elements in optimal position based on a...

阅读全文

欢迎留言