极客观点
项目管理
HarmonyOS
只放了一个img标签，切换图片通过修改img的src实现，这种情况下该如何做出过渡轮播的效果？
已经实现点击按钮切换图片和自动轮播的效果，现在只需要考虑过渡，谢谢大家！（如果解决了问题，可以加我微信，转账20元作为回报）
此处为目前的代码，本人小白，水平有限，见谅
HTML
<div class="banner w">
<ul class="img">
<li><a href="#"></a></li>
</ul>
<div class="dot-wrapper">
<a href="#" class="dot"></a>
<a href="#" class="dot"></a>
<a href="#" class="dot"></a>
<a href="#" class="dot"></a>
<a href="#" class="dot"></a>
</div>
<div>
<a href="#" class="prev"></a>
</div>
<div>
<a href="#" class="next"></a>
</div>
</div> CSS
.banner{
position: relative;
height: 460px;
}
.banner .img li{
position: absolute;
}
.banner .banner-img{
width: 100%;
}
.dot-wrapper{
width: 80px;
height: 10px;
bottom: 22px;
right: 35px;
position: absolute;
}
.dot{
width: 6px;
height: 6px;
border-radius: 50%;
background-color: rgba(0, 0, 0, .4);
border: 2px rgba(255, 255, 255, .4) solid;
margin-left: 6px;
float: left;
}
.active{
border-color: rgba(0, 0, 0, .4);
background-color:rgba(255, 255, 255, .4);
}
.dot:hover{
border-color: rgba(0, 0, 0, .4);
background-color:rgba(255, 255, 255, .4);
}
.prev,.next{
display: block;
position: absolute;
width: 41px;
height: 69px;
background-image: url(../img/icon-slides.png);
top: 184px;
}
.prev{
left: 233px;
background-position: -83px;
}
.prev:hover{
background-position: 0px;
}
.next{
right: 0;
background-position: -124px;
}
.next:hover{
background-position: -41px;
}JS
window.onload = function(){
let prev = document.getElementsByClassName("prev")[0];
let next = document.getElementsByClassName("next")[0];
let img = document.getElementsByClassName("banner-img")[0];
let dots = document.getElementsByClassName("dot");
let imgArr = ["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg","img/banner4.jpg","img/banner5.jpg"];
//banner的图片是下载的小米商城首页中间的轮播图片
let index = 0;
dots[index].className = "dot active"//让第一个导航点选中
//点击按钮切换图片，改变导航点，设置过渡
prev.onclick = function(){
index--;
if(index < 0){
index = imgArr.length - 1;
}
img.className = "transition";
img.src = imgArr[index];
dots[index].className = "dot active";//让当前导航点选中
if(index+1 <= dots.length-1){
dots[index+1].className = "dot"
}
else{
dots[0].className = "dot"
}
clearInterval(timer);//关闭之前的定时器(每次点击按钮时要重新开始计时)
timer = autoRun();//设置新的定时器
}
next.onclick = function(){
index++;
if(index > imgArr.length -1){
index = 0;
}
img.src = imgArr[index];
dots[index].className = "dot active";//让当前导航点选中
if(index-1 >= 0){
dots[index-1].className = "dot"
}
else{
dots[dots.length-1].className = "dot"
}
clearInterval(timer);//关闭之前的定时器
timer = autoRun();//设置新的定时器
}
//点击导航点切换图片
let tmp = 0;
for(let i = 0;i < dots.length; i++){
dots[i].onclick = function(){
dots[index].className = "dot";
//双变量方法：index是点击prev和next对应的图片编号，i是属于每个导航点的编号
//不能在2个for循环内都用index，否则无法修改index，即最后一行的代码无法实现
//先让index对应的导航点未选中
dots[tmp].className = "dot";
//tmp表示之前 通过点击导航点 而选中的导航点，让它未选中
dots[i].className = "dot active";
//让 最新一次点击的导航点 选中
img.src = imgArr[i];
//改变图片
tmp = i;
//更新tmp
index = i;
//修改index，否则再次点击prev或next时会出问题
clearInterval(timer);//关闭之前的定时器
timer = autoRun();//设置新的定时器
}
}
timer = autoRun();
img.style.transitionDuration = "1s";
//图片的自动轮播函数
function autoRun(){
let timer = setInterval(function(){
index++;
if(index >= imgArr.length){
index = 0;
dots[dots.length-1].className = "dot";
}
else{
dots[index-1].className = "dot";
}
img.src = imgArr[index];
dots[index].className = "dot active";
},5000);
// let timer_ = transition();
// img.style.opacity = 1;
return timer;
//timer封装在autoRun函数内，外层访问不到，必须返回timer，这样才能关闭定时器
}
//轮播的过渡效果，暂时想不出合适的解决方案
}
}
过渡的核心是transition属性，而这个是针对css的其他属性的，既然你是要淡入淡出，那就是transition: opacity，所以你的代码里需要在切换的同时更改opacity；顺着这个思路去写你的逻辑，你的实现太乱了，这里给你示例一下，你再琢磨下修改下你的代码吧