实例介绍
【实例简介】
该项目基于js实现的一款轮播图插件，当点击图片时会自动跳到相应的页面
【实例截图】
【核心代码】
/**
* 初始化图片区域
*/
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);
}
标签： 轮播图
好例子网口号：伸出你的我的手 — 分享！
相关软件
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论