想在我们的数据可视化平台上做一个这样的轮播图特效：
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
网友评论