01.opacity版
无滚动动画,通过透明度和z-index控制图片切换过渡.
02.节流版
position:absolute绝对定位,根据left值设置过渡动画,切换到最后一张图动画完成时,归位图片,实现无缝轮播,最后一张图滚动归位至第一张时,如果动画没有完成,快速点击,过渡动画会混乱,使用节流函数,控制滚动完成再触发下一次滚动.
03无缝轮播
借助封装dom运动框架,可以实现运动结束,执行下一步操作,滚动流畅.
参数:
animation(dom,target,time,callBack)dom:dom 要运动的dom元素
target:{} 根据样式变化差异运动, left right等
time:time 动画时间
callBack 回调 动画结束执行的回调 可选
CSS3 anmiation
样式示例:
.class{
display:none;
animation-name:pannel-right-top;
animation-duration:.3s;
}
.class:hover{
display:block;
}
@keyframes pannel-right-top {
0% {
opacity: .2;
transform: scale(.3);
transform-origin: right top;
}
100% {
opacity: 1;
transform: scale(1);
transform-origin: right top;
}
}
/*除此以外,就是定位,位置了*/类似轮播效果,鼠标滚动,整屏上下滚
节流控制滚动频率,动画完成后可以继续滚动
//mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
//DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动关键样式：
:root{
--fade-time: 0.5s;
}
body{
margin:20px;
padding:0;
background-color: #333;
}
.container{
max-width:760px;
margin:0 auto;
background-color: rgba(0, 0, 0, .7);
}
/*透明度切换时,会闪出背景色,白色刺眼,使用柔和背景*/
.main-img img,
.imgs img{
width:100%;
border:#fff solid 3px;
}
/*grid网格布局*/
.imgs{
display:grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 3px;
}
/*动画*/
.fadeIn{
opacity: 0.5;
animation: fade-in var(--fade-time) ease-in 1 forwards;
}
@keyframes fade-in {
to{
opacity: 1;
}
}
/*媒体查询,页面宽度缩小至maxWidth时变为2列布局*/
@media(max-width: 600px) {
.imgs{
grid-template-columns: repeat(2,1fr);
}
}布局：
<div class="container">
<div class="main-img">
<img src="./imgs/img01.jpg" id="current" alt="">
</div>
<div class="imgs">
<img src="./imgs/img01.jpg" alt="">
<img src="./imgs/img02.png" alt="">
<img src="./imgs/img03.jpg" alt="">
<img src="./imgs/img04.png" alt="">
<img src="./imgs/img05.jpg" alt="">
<img src="./imgs/img06.jpg" alt="">
<img src="./imgs/img08.jpg" alt="">
<img src="./imgs/img08.jpg" alt="">
</div>
</div>交互：
//获取节点
const current = document.getElementById('current')
const imgs = document.querySelector('.imgs')
const img = document.querySelectorAll('.imgs img')
const opacity = 0.6
//监听点击事件
imgs.addEventListener('click',imgClick)
//初始第一张缩略图的不透明度
img[0].style.opacity=opacity
//imgClick处理函数
function imgClick(e){
img.forEach(img=>(img.style.opacity = 1))
//点击缩略图切换主体图
current.src = e.target.src
//添加fadeIn类名,主题图透明动画,添加以后必须要动画执行完移除,不然之后的动画没了
current.classList.add('fadeIn')
//定时器移除动画,注意定时器的时间会影响动画
setTimeout(()=>(current.classList.remove('fadeIn')),600)
//点击缩略图透明
e.target.style.opacity = opacity
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent