极客观点
项目管理
HarmonyOS
轮播图共显示5张。每张宽度为600.布局时在第5张后面再复制一份第一张图片作为辅助图。当已经运动到第5张图片时，点击下一张后会先运动到第1张图片的辅助图上，当到达了辅助图上以后再瞬间将其left值设为真正的第一张图片的left值。但是却没有效果，浏览器也未报错。而且还发现一个问题，当我在控制台输出当前left值时，发现比实际的值要小一个图片的宽度。请大神帮我看一个我错在哪？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;}
a{text-decoration: none;}
ul{list-style: none;}
#container{width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}
#list { width: 4200px; height: 400px; position: absolute;left:0; z-index: 1;}
#list img { float: left;}
#buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
#buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
#buttons .on { background: orangered;}
.arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
#container:hover .arrow { display: block;}
#prev { left: 20px;}
#next { right: 20px;}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="images/lun5.jpg"/>
<img src="images/lun1.jpg"/>
<img src="images/lun2.jpg"/>
<img src="images/lun3.jpg"/>
<img src="images/lun4.jpg"/>
<img src="images/lun5.jpg"/>
<img src="images/lun1.jpg"/>
</div>
<div id="buttons">
<span class="on" value="1"></span>
<span value="2"></span>
<span value="3"></span>
<span value="4"></span>
<span value="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a></div>
</body>
<script>
window.onload=function(){
var container=document.getElementById('container');
var list=document.getElementById('list');
var buttons=document.getElementById('buttons').getElementsByTagName('span');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
var index=1;//显示第几张图片
var timer=null;//点击右箭头
next.onclick=function(){
index++;
if(index>5){
index=1;
//移动到第1张图的辅助图上
moveTime(list,'left',-3600,200);
//判断如果移到到第一张辅助图上就瞬间切换到真正的第一张图。但不起作用。
if(list.offsetLeft==-3600){
list.style.left=-600+"px";
}
}
else{
moveTime(list,'left',-600*index,200);
}
showButton();
console.log(list.offsetLeft);//测试用。发现输出的数值都比当前的offsetLeft值小一个宽度。
}
//点击左箭头
prev.onclick=function(){
index--;
if(index<1){
index=5;
}
showButton();
moveTime(list,'left',-600*index,200);
}//点击小圆点
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick=function(){
var myValue=parseInt(this.getAttribute('value'));
var pyl= -600*myValue;//偏移量
moveTime_plus(list,{left:pyl},200)
index=myValue;
showButton();
}
}//获取样式的函数
function getStyle(obj,attr)
{
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null )[attr];
}
/--------小圆点变色的封闭函数------------/
function showButton(){
for (var i = 0; i < buttons.length; i++) {
buttons[i].className='';
}
buttons[index-1].className='on';
}/--------时间版运动框架------------/
function moveTime(obj,attr,value,time){
clearInterval(obj.timer);
var startValue=parseFloat(getStyle(obj,attr));//初始值
var nowTime=new Date();//初始时间
obj.timer=setInterval(function(){
var n=(new Date()-nowTime)/time;
if(n>=1){
n=1;
clearInterval(obj.timer);
}
obj.style[attr]=startValue+n*(value-startValue)+'px';
},30);
}}
</script>
</html>
if(list.offsetLeft=-3600) 少一个=号吧！
left值小，可能是setInterval是异步的
补充：
moveTime这个函数不能获取动画结束的时候，改造一下，在回调函数里判断