轮播图效果

想在我们的数据可视化平台上做一个这样的轮播图特效：

wmda.png

需要把下图中的图片列表展示成轮播图：

yuntu.png

整个项目使用的是angularjs，需要找一个好用一点的轮播图插件：

1、bootstrap + Carousel （基础轮播是单页效果）
2、jcarrousel （npm包）
3、slick

最后选择了slick，有bower的安装包，几个插件的使用方法都差不多。
slick github地址

通过bower下载完，将对应的vender文件加入到对应页面的css和js依赖里，我们就可以在前端使用slick了。

#css
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
#js
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>

先做功能测试，例子地址

<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
  <div><h3>4</h3></div>
  <div><h3>5</h3></div>
  <div><h3>6</h3></div>
</div>

测试完成，开发。

炫彩展示第一版：

show.png

一开始，我想仿照样品的设计，只在部分页面显示轮播效果，发现边栏会影响显示效果，于是，在显示过程中隐藏边栏。
对展示图表大小的控制。
中间页的放大效果。
原本仪表盘支持拖拽功能和新插件之间的互相影响。
highcharts Dom变化后重绘，直接改动列表Dom。
兼容地图特殊大小。

炫彩展示第二版:

改完第一个版，数据图表还是要尽量全面的显示数据，小师傅让把图表显示的更大，（中间又做了一版，折叠效果，table不能展示全部数据。还要放大。改动了原来td的min-length虽然能显示所有的内容，可是数据对不齐了，恢复回去后，想直接增大中间页的宽度，resize方法效果不好，而且div重叠的地方会触发跳转。）

show2.jpg

隐藏导航和页脚。
针对循环方式的选择，是循环还是单向。
仪表盘间跳转方式选择：点击还是滑动。
highcharts画图会响应用户的点击效果，遮罩处理。
table字段可复制。
大屏小屏图表展示兼容。
i标签变形，全屏效果。
测试导出功能。
返回位置的选择。

炫彩展示第三版：

show3.jpg

js:

#slick的初始化函数
$(".center").slick(
     dots: true
     centerMode: true
     arrows: true
     slidesToShow: 1
     infinite: false
     draggable: false
     centerPadding: '250px' //slide-list 两边边距距离
     # autoplay: true
     # autoplaySpeed: 2000
 )
# slick点击跳转
$('.center').on('click', '.slick-slide', ->
     actIndex = $(this).attr('data-slick-index')
     slideIndex = $(this).index()
     $('.center').slick('slickGoTo', parseInt(actIndex), true)
 )

css:

    # css兼容大小屏
    @media screen and (max-width: 1400px) {
        .chart-width {
            height: 350px !important;
        }
    }

    @media screen and (min-width: 1401px) {
        .chart-width {
            height: 600px !important;
        }
    }
    # 遮罩效果
    .mask {
        background-color: white;
        filter: alpha(opacity=50);
        opacity: 0;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 100000;
        width: 100%;
        height: 100%;
        display: none;
    }

    #中间页效果
    .slick-current {
        transition: All 0.4s ease-in-out;
        -webkit-transition: All 0.4s ease-in-out;
        -moz-transition: All 0.4s ease-in-out;
        -o-transition: All 0.4s ease-in-out;

        // -webkit-transform:scale(1.2, 1.2);
        // -moz-transform:scale(1.2, 1.2);
        // -transform:scale(1.2, 1.2);

        position: relative;
        z-index: 10;
        # 支持table可复制
        -webkit-user-select: text;
        -moz-user-select: text;
        -o-user-select: text;
        user-select: text;

        .mask {
            display: none !important;
        }

    }

    # 隐藏边线颜色
    .slick-slide, .chartbox {
        outline: none;
    }

总结：
整个功能还没有完全做完，在做的过程中，遇到了很多问题，有时候总觉得自己已经做完了，可是还没有达到小师傅的需求。需要保证原有的页面功能，更好的展示数据的效果。耐住性子完成新的要求，A方案不可以就寻找B方案，自己的前端基础不是很牢固，很多css3的特性，js的方法还要学习，用一个轮子实现了自己的功能，开心。

Ending：

show5.PNG