箭头l型。display=' block
箭头r样式。display=' block
//鼠标经过，清除定时器。
间隙(定时器);
计时器=空
});
聚焦。addevent侦听器(' mouseout '，function() {
箭头l型。display=' none
箭头r样式。display=' none
//鼠标离开，打开定时器
timer=setInterval(function() {
//手动调用点击事件
arrowR.click()
},2000);
});
//2.动态生成小圆圈。(主要涉及到节点操作。)
var lis=focuss。查询选择器(“ul”).查询selector all(' Li ')；
var ol=focuss。查询选择器(“ol”)；
var focusWidth=lis[0].客户端宽度
for(var I=0；长度；i ) {
var Li=文档。createelement(“Li”)；
//记录当前小圆圈的索引号，通过自定义属性来做。
li.setAttribute('index '，I)；
ol.appendChild(李);
//3.小圆圈的排他思想：在生成小圆圈的同时，直接绑定点击事件。
li.addEventListener('click '，function(){
//除了当前李，其他里都清除掉类名
for(var j=0；j ol。孩子。长度；j ) {
儿童[j].类名=" "；
}
这个。class name=" current
//4.点击小圆圈，滚动图片
var指数=这个。get attribute(“index”)；
数量=索引；
圆=指数；
animate(ul，-焦距宽度*索引))；
});
}
//把开环（同开环)中的第一个孩子的类名设置成目前的
ol.children[0].className='当前；
//2.鼠标点击按钮，显示不同的图片。
var ul=focuss。查询选择器(“ul”)；
//6.克隆第一张图片放到图片最后面
var first=ul.children[0].克隆节点(真);//真为深克隆
ul.appendChild(第一);
var flag=true//设置节流阀。
arrowR.addEventListener('click '，function(){
//无缝滚动
如果（标志){
标志=假
if(num==ul.children.length-1) {
ul。风格。左=0；
num=0；
}
数字
animate(ul，-(focusWidth * num)，function() { //利用回拨，开启节流阀。
标志=真
});
//点击时，小圆圈也做响应的修改。
圆形；
if(circle==ol。孩子。长度){
圆=0;
}
圆变()；
}
});
arrowL.addEventListener('click '，function(){
if(flag=true) {
标志=假
if(num==0) {
ul。风格。left=-(焦点宽度*(ul。孩子。length-1)' px ')；
num=ul。孩子。长度-1；
}
num-；
animate(ul，-(focusWidth * num)，function() {
标志=真
});
//点击时，小圆圈也做响应的修改。
圈-;
if(circle==-1) {
圆圈=ol。孩子。长度-1；
}
圆变()；
}
});
函数circleChange(){
for(var I=0；我喜欢。孩子。长度；i ) {
ol .儿童[i].类名=" "；
}
ol。儿童[圈]。className='当前；
}
})
(3)缓动画函数
函数动画（对象、目标、回调){
清除间隔(对象。定时器)；
obj。timer=setInterval(function(){
var step=(target-obj。向左偏移)/10；
step=step 0？数学。ceil(step):数学。地板(台阶)；
if(obj.offsetLeft==target) {
清除间隔(对象。定时器)；
//如果(回调){
//callback()；
//}
调用回调()；
}
obj。风格。left=obj。向左偏移一步“px”；
},30)
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。