window.onload = function () {
// 1.获取标签
var oPicDiv = document.getElementById("pic"),
oList = document.getElementById("list"),
oPicDiv1 = document.getElementById("pic1"),
oList1 = document.getElementById("list1");
// 添加两份的内容复制网页
oList1.innerHTML = oList1.innerHTML + oList1.innerHTML;
oList.innerHTML = oList.innerHTML + oList.innerHTML;
// 2.默认左边滚动: left
var iLeft = 0;// 位置
var iPosition = -1;// 方向
function fnAnimation() {
iLeft += iPosition;
//判断切换
if (iLeft < -1000) {
iLeft = 0;
}
if (iLeft > 0) {
iLeft = -1000;
}
oList.style.left = iLeft + "px";
oList1.style.left = iLeft + "px";
console.log("定时器一直在走");
}
var timer = setInterval(fnAnimation,35);
// 4.监听鼠标
oPicDiv.onmouseover = function () {
//干掉计时器
clearInterval(timer);
}
// 鼠标移开 动画开始
oPicDiv.onmouseout = function () {
// 重新开启
timer = setInterval(fnAnimation,35);
}
oPicDiv1.onmouseover = function () {
// 干掉计时器
clearInterval(timer);
}
// 鼠标移开 动画开始
oPicDiv1.onmouseout = function () {
// 重新开启
timer = setInterval(fnAnimation, 35);
}
}
前段实现两个图片轮播
最新推荐文章于 2025-05-22 13:28:11 发布