目标:使用实现Javascript实现多图的横向无缝滚动,左右各有箭头可控制滚动方向,鼠标滑过事滚动停止,鼠标离开滚动继续。拓展则垂直滚动。
思路:
1.图片运动,设定图片为绝对定位,然后使用定时器使图片的left值不断增加或减少
2.无缝循环,使用两组图片,当图片运动过半时,拉回即left归零滚动继续,保证视觉效果无间断
3.控制左右方向,控制left值增加量的征服值即可实现
4.鼠标悬停,设置onmouseover事件关闭定时器,鼠标移开则重启定时器
知识点:
1.属性offsetLeft offsetTop offsetWidth offsetHeight 分别表示对象的左边距、上边距、宽和高,均为数值,设置时注意尾部 +‘px’
2.oUl.innerHTML+=oUl.innerHTML; 将对象的内容复制一倍
3.定时器setInterval(函数,时间间隔) 每隔一定时间间隔运行一次函数
setTimeout(函数,时间) 加载后时间间隔后只运行一次函数,可起到延时效果
clearInterval( 定时器对象) 关闭定时器
HTML框架:
<div class="roll" id="roll">
<a href="javascript:void(0);" class="btn_left"></a>
<a h