起因：
做了个滚动效果，除了自适应以外，都和腾讯AI开发平台的效果相似。
主要技术点：
1.动画淡入淡出切换图片
2.轮播滚动效果 + hover改变选中滚动状态
3.文字切换展示
1.动画淡入淡出切换图片(通过控制CSS来改变效果)
JS代码：
// 替换class达到淡入淡出的效果
fadeIn(e) {
e.className = "time-slider-item fadein";
}
fadeOut(e) {
e.className = "time-slider-item ";
}
// 替换class达到loading的效果
easeIn(e) {
e.className = "loading-line-progress loading-line-progress-select";
}
easeOut(e) {
e.className = "loading-line-progress ";
}
// 替换选中背景色
selectIn(e) {
e.className =
"time-slider-pagination-item time-slider-pagination-item-select";
}
selectOut(e) {
e.className = "time-slider-pagination-item ";
}
CSS代码：
// loading加载,宽度从 0-> 248
.loading-line-progress-select {
width: 248px;
transition: width 3s ease-in;
}
// 淡入效果
.fadein {
opacity: 100;
filter: alpha(opacity=100);
transition: opacity 1s linear;
}
// 选中改变颜色
.time-slider-pagination-item-select {
background-color: rgba(29, 245, 255, 0.15);
}
2.轮播滚动效果 + hover改变选中滚动状态
React对应的HTML代码：
{this.state.info.map(function(item, index, array) {
return (
className="time-slider-item"
key={index + "_time-slider-item"}
>
{item.title}
{item.desc1 ? (
{item.desc1}
) : null}
{item.desc2 ? (
{item.desc2}
) : null}
{item.desc3 ? (
{item.desc3}
) : null}
className="time-slider-img"
style={{ backgroundImage: "url(" + item.bannerPic + ")" }}
>
{" "}
);
}, this)}
对应JS代码分析如下：
初始化时，设置该播放的轮播图片是第0个，info为全局获取的图片值
this.state = {
info: info,
cur_img: 0
};
设置定时轮播，如果在轮播中，清空之前的轮播，开始hover状态后的轮播
// 自动轮播图片 + hover时候切换
setIntervalTurn(index, isStop) {
//申明图片数组中当前的轮播图片
let info = document.getElementById("time-slider-cover").children;
let pagination = document.getElementsByClassName("loading-line-progress");
let paginationSelect = document.getElementsByClassName(
"time-slider-pagination-item"
);
if (isStop) {
window.clearInterval(timer);
// 清空原来的背景
for (var i = 0; i < info.length; i++) {
this.fadeOut(info[i]);
this.easeOut(pagination[i]);
this.selectOut(paginationSelect[i]);
}
}
let startTurn = index || 0;
this.fadeIn(info[startTurn]);
this.easeIn(pagination[startTurn]);
this.selectIn(paginationSelect[startTurn]);
//设置轮播间隔，并且改变轮播的图片
this.setState({
cur_img: index
},
() => {
timer = window.setInterval(this.turnImgs.bind(this), 3000);
}
);
}
Hover选中时，轮播对应的图片
// hover时，选中当前，并且加载loading
onhover(index, event) {
this.setIntervalTurn(index, true);
}
图片轮播函数，用于定时轮播图片
turnImgs() {
let self = this;
let info = document.getElementById("time-slider-cover").children;
let pagination = document.getElementsByClassName("loading-line-progress");
let paginationSelect = document.getElementsByClassName(
"time-slider-pagination-item"
);
let cur_img = this.state.cur_img;
// 第一个
if (cur_img === info.length - 1) {
this.setState({
cur_img: 0
},
() => {
// 淡出
self.fadeOut(info[info.length - 1]);
self.easeOut(pagination[info.length - 1]);
this.selectOut(paginationSelect[info.length - 1]);
// 淡入
self.fadeIn(info[0]);
self.easeIn(pagination[0]);
this.selectIn(paginationSelect[0]);
}
);
}
// 除了第一个以外的其他个
else {
this.setState({
cur_img: cur_img + 1
},
() => {
// 淡出
self.fadeOut(info[self.state.cur_img - 1]);
self.easeOut(pagination[self.state.cur_img - 1]);
this.selectOut(paginationSelect[self.state.cur_img - 1]);
// 淡入
self.fadeIn(info[self.state.cur_img]);
self.easeIn(pagination[self.state.cur_img]);
this.selectIn(paginationSelect[self.state.cur_img]);
}
);
}
}
3.文字切换展示
主要根据 cur_img 目前的展示顺序，再从 info 里取出对应的数据，即：info[cur_img].text 的形式， 同步切换文字
className="time-slider-pagination-inside"
id="time-slider-pagination-inside"
>
{this.state.info.map(function(item, index, array) {
return (
onMouseOver={this.onhover.bind(this, index)}
key={index + "_time-slider-item-pagination"}
className="time-slider-pagination-outer cursor_pointer"
style={{ display: !!item.subTitle ? "block" : "none" }}
>
className="time-slider-pagination-img"
style={{ backgroundImage: "url(" + item.subIcon + ")" }}
>
{" "}
{item.subTitle}
);
}, this)}
DEMO效果
相关链接
