图片的间隔轮播整个思路过程

119 阅读1分钟

图片的间隔轮播,

这个先设置初始值一个图片的时间 Time=null

容器内容的复制 容器innerHTML += 容器innerHTML

再容器的动态宽度 容器宽度= 一个图片的宽度 * 图片的数量

先写一个function控制一张图片滚动的过程,判断,

如果

view视口的scrollLeft % 一张图片的宽度 ==0 就清空定时器Time 然后setInterval循环图片的函数 function

不然else 让视口偏移量view.scrollLefteft ++

然后判断 视口偏移量 view.scrollLefteft>= 盒子容器的一半 就让视口偏移量 view.scrollLefteft=0

再写一个function定义整个过程,

让view.scrollLeft++

加上一个setInterval循环一张图片的播放

设置定时器控制zhenggu

tab切换滚动功能

设置容器动态宽度 ,Time=null , lis的索引index =1

先写一个function 封装运动过程

设置

开始位置start = lis[0].scrollLeft, 结束的位置end =lis[0].scrollLeft*lis.length

最终的运动范围 chang = end - start

最小的速度 minspeed = 0 最大的速度 maxspeed = 20

速度 cha = maxspeed - min speed

设置一个定时器Time = setInterval 控制运动过程 ( 函数function(){

让minspeed++

判断 如果最小的速度>=最大的速度 就让最小的速度 = 最大的速度 清空一下定时器

开始的位置start += speed

视口的偏移量 = start

} )
for循环遍历一些lis.length{

lis[i].classNmae = ' '

}

lis[index ].className = 'active'

再写一个for循环

lis[i].index = i

写一个点击函数 lis[i] .onclick

先清空定时器

for循环遍历一下lis 让 lis[ j ].className = ' '

index = this .index

执行运动过程