标签:初始 设置 sele fun inter 效果 for 全局 距离
<div class="focus">
<ul>
<li>
<a href="javascript;:"><img src="images/banner1.webp" height="460"></a>
</li>
</ul>
</div>
overflow:hidden
即可;var focus = document.querySelector(".focus");
var circle = document.querySelector(".circle");
var sliderL = document.querySelector(".slider-l");
var sliderR = document.querySelector(".slider-r");
var cirul = circle.querySelector("ul");
var focul = focus.querySelector("ul");
给每个小圆点添加一个自定义属性li.setAttribute("index",i);
,用于后续的left值的变化:
??点击第几个就是ul移到距左边 index*imgWidth
这么长距离处;
left=-imgWidth
;for(let j=0;j<len;++j) {
cirul.children[j].style.backgroundColor = "#999";
}
this.style.backgroundColor = "rgba(0,0,0,0)";
function animate(obj, target, callback) {
//要移动的对象,移动的目的位置,移动结束时调用的函数
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if(obj.offsetLeft == target) {
clearInterval(obj.timer);
if(callback) { //若有这个参数则调用,没有则忽略
callback();
}
} else {
var step = (target-obj.offsetLeft);
step = step > 0 ? Math.ceil(step/10) : Math.floor(step/10);
obj.style.left = obj.offsetLeft+step+'px';
}
}, 30);
}
注意:若animate在另外的js文件中,这个js文件一定要在当前js文件之前引用,不然会出现animate函数未定义的报错
if(num == len) {
//此时的len是不包括多余那张的length,且num从0开始计
num = 0;
//迅速跳回第一张
focul.style.left = '0px';
}
同时小圆点也要跟着变化,由于最后一张图片多余的存在,使小圆点和图片同时变化最简单的方法是另设一个全局变量cur,方法差不多不再赘述,if(cur == len) {cur = 0;}
;
由于小圆点也要跟着变化,则此处也要用到排他思想
var timer = setInterval(function() {
sliderR.click();
}, 3000);
标签:初始 设置 sele fun inter 效果 for 全局 距离
原文地址:https://www.cnblogs.com/TRY0929/p/11940979.html