/**
* 初始化图片区域
*/
function initImgs() {
imgArea.style.width = "100%";
imgArea.style.height = "100%";
// 利用flex布局使其里面的元素可以横向排列
imgArea.style.display = "flex";
imgArea.style.overflow = "hidden";
// 遍历循环输出轮播图
for (let i = 0; i < options.length; i ) {
var obj = options[i];
var img = document.createElement('img');
img.src = obj.imgUrl;
img.style.width = "100%";
img.style.height = "100%";
img.style.marginLeft = "0";
img.style.cursor = "pointer";
//给图片添加事件,使其点击图片时实现跳转
img.addEventListener("click", function() {
location.href = options[i].link;
})
imgArea.appendChild(img);
}
//当鼠标移入轮播区域时,轮播停止切换
imgArea.addEventListener("mouseenter", function() {
clearInterval(changeTimer);
changeTimer = null;
})
//当鼠标移出轮播区域时,轮播切换恢复
imgArea.addEventListener("mouseleave", function() {
autoChange();
})
areaDom.appendChild(imgArea);
}
/**
* 初始化角标区域
*/
function initNumbers() {
numberArea.style.textAlign = "center";
numberArea.style.marginTop = "-25px";
//遍历循环,根据轮播图相关配置生成相应的角标
for (let i = 0; i < options.length; i ) {
var sp = document.createElement("span");
sp.style.width = "12px";
sp.style.height = "12px";
sp.style.background = "lightgray";
sp.style.display = "inline-block";
sp.style.margin = "0 7px";
sp.style.borderRadius = "50%";
sp.style.cursor = "pointer";
sp.addEventListener("click", function() {
curIndex = i;
setStatus();
})
numberArea.appendChild(sp);
}
areaDom.appendChild(numberArea);
}
/**
* 设置整个区域的状态
*/
function setStatus() {
//1.设置圆圈的背景颜色
for (var i = 0; i < numberArea.children.length; i ) {
if (i === curIndex) {
//设置背景颜色为选中状态
numberArea.children[i].style.background = "#be926f";
} else {
//设置背景颜色为普通状态
numberArea.children[i].style.background = "lightgray";
}
}
//2.显示图片
var start = parseInt(imgArea.children[0].style.marginLeft);
//制作动画
//目标值
var end = curIndex * -100;
//变化的距离
var dis = end - start;
//完成变化需要的时间
var duration = 500;
//每毫秒前进的距离即速度
var speed = dis / duration;
//如果当前正在进行动画,那么则把之前还未完成的动画清除掉,然后再重新加动画
if (timer) {
clearInterval(timer);
}
timer = setInterval(function() {
start = speed * 20;
//设置第一张图片的marginLeft
imgArea.children[0].style.marginLeft = start "%";
if (Math.abs(end - start) < 1) {
imgArea.children[0].style.marginLeft = end "%";
clearInterval(timer);
}
}, 20);
}
网友评论
我要评论