渐变轮播图的实现

注意事项

需要提前在img数组中,把除去第一个图片中的opacity调整为0,加上transation:all time;
用前需要定义变量,获取html元素
direction:方向----left或者right
group:图片数组

函数封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function opacityRightChange(direction,group){
direction.addEventListener('click',function(){
if(flag>=0&&flag<group.length-1){
group[flag].style.opacity = '0'
flag++
group[flag].style.opacity = '1'
}else if(flag >=group.length-1){
group[flag].style.opacity = '0'
flag = 0
group[flag].style.opacity = '1'
}
})
}
function opacityLeftChange(direction,group){
direction.addEventListener('click',function(){
if(flag <=imglist.length-1&&flag >0){
console.log(11)
group[flag].style.opacity = '0'
flag--
group[flag].style.opacity = '1'
}else if(flag <=0){
group[flag].style.opacity = '0'
flag = imglist.length-1
group[flag].style.opacity = '1'
}
})
}

函数的使用

1
2
   opacityRightChange(right,imglist)
opacityLeftChange(left,imglist)
  • Copyright: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
  • Copyrights © 2022 BieGua
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信