极客观点
项目管理
HarmonyOS
我是一个初学者，正在使用原生js写一个轮播图，一共是6张图片，第6张图和第1张图是一样的，我操作ul一直向左移动，当到达第6张图片时，瞬间使ul的left变成0px，完成一个循环
但结果让我很难过，我让动画效果结束时判断当前是第几张图片，如果是第六张图，就让ul的left变成0px，也就是ul.style.left = "0px";但无论我怎么弄，ul的left就是不变，但设置其他属性就可以。
比如topul.style.top = "100px";
比如backgroundColorul.style.backgroundColor = "red";
并且我给一个按钮绑定响应函数设置ul.style.left = "0px"，都可以成功让ul的left变成0px，但放到动画结束后就不行。太傻了，太难受了，我已经研究了一整天了，希望有大神帮忙看看，仔细研究研究！！！
以下是完整代码：
go函数用来操作某个对象移动
huadong函数用来让ul周期性往左移动
img内图片的尺寸都是500X333.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>重写轮播图</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 5000px;
list-style:none;
position: absolute;
}
li{
float: left;
padding: 0 10px;
}
#box{
width: 500px;
height: 333px;
background-color: yellowgreen;
padding: 20px 0;
margin: 100px auto;
position: relative;
}
#nav{
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -62.5px;
}
#nav a{
height:15px;
width: 15px;
background-color: red;
opacity: 0.5;
float: left;
margin: 0 5px;
}
#nav a:hover{
background-color: black;
}
</style>
<script>
window.onload = function(){
var box = document.getElementById("box");
var ul = document.getElementById("ul");
var li = document.getElementsByTagName("li");
var a = document.getElementsByTagName("a");
//ul.width
ul.style.width = li[0].offsetWidth * li.length + "px";
//box.width
box.style.width = li[0].offsetWidth + "px";
//位置计数
var index = 0;
setA();
//给a绑定单击响应函数
for( i=0; i<a.length; i++){
a[i].number = i;
a[i].onclick = function(){
index = this.number;
console.log(this.number);
//ul.style.left = -(li[0].offsetWidth * index) + "px";
go(ul,"left",10,-(li[0].offsetWidth * index));
//导航条变色
setA();
}
}
document.getElementById("btn01").onclick = function(){
huadong();
}
document.getElementById("btn02").onclick = function(){
ul.style.left = "0px";
}
//自然滑动函数
function huadong(){
setInterval(function(){
index++;
go(ul,"left",10,-(li[0].offsetWidth * index),function(){
//判断索引是否等于5，如果是，让ul的left变成0!!!!!!
//!!!!!!!!???为什么不行
if (index == 5){
ul.style.backgroundColor = "red";
ul.style.left = "0px";
ul.style.top = "100px";
}
setA();
});
//console.log("索引："+index);
},1000);
}
//移动函数
//操作对象，操作样式，速度值，目标值，操作完毕后执行的函数
function go(obj,attr,speed,mubiao,fc){
//每次重新操作都关闭上一个定时器
clearInterval(obj.biaoshi);
//判断速度正负值，当前比目标小则正，当前比目标大则负;
if (parseInt(getStyle(obj,attr)) > mubiao) {
speed = -speed;
}
//计时器---------------------------------------
obj.biaoshi = setInterval(function(){
//获取样式值
var getendStyle = parseInt(getStyle(obj,attr));
//得到即将移动的新值
var newstyle = getendStyle + speed;
//判断是否到达目标
if (speed>0 && newstyle>mubiao || speed<0 && newstyle<mubiao ) {
newstyle = mubiao;
clearInterval(obj.biaoshi);
fc && fc();
}
//让该元素开始变化
obj.style[attr] = newstyle + "px";
},10);
//计时器---------------------------------------
//获取样式值的函数
function getStyle(obj,name){
return getComputedStyle(obj,null)[name];
}
}
//导航条变色函数
function setA(){
if (index == 5){
index = 0;
}
for( i=0; i<a.length; i++){
a[i].style.backgroundColor = "";
}
a[index].style.backgroundColor = "black";};
}
</script>
</head>
<body>
<div id="box">
<ul id="ul">
<li><img src="timg1.jpg" alt=""></li>
<li><img src="timg2.jpg" alt=""></li>
<li><img src="timg3.jpg" alt=""></li>
<li><img src="timg4.jpg" alt=""></li>
<li><img src="timg5.jpg" alt=""></li>
<li><img src="timg1.jpg" alt=""></li>
</ul>
<div id="nav">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<button id="btn01">开始轮播</button>
<button id="btn02">让ul的left变成0px</button>
</body>
</html>
大致看了一下，你将left属性，放在行内，再用ul.style.left = "0px"试试，top能改变是因为css没有设置，你现在js操作的是行内的属性