2024年前端最新小实习项目 - 仿写京东商城 - CSS＋JS+HTML，前端开发社招面试经验

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

this.sliderWidth = this.box.clientWidth

this.sliders = this.picBox.children.length

this.index = 1

this.animated = false

this.auto = null

this.init()

}

init(){

this.initPoint()

this.copyPic()

this.leftRight()

this.play()

}

initPoint(){

const num = this.picBox.children.length;

let frg = document.createDocumentFragment();

for(let i = 0; i < num; i++){

let li = document.createElement(“li”)

li.setAttribute(“data-index”, i+1)

if(i == 0) li.className = “active”

frg.appendChild(li)

}

this.indexBox.children[0].style.width = num * 10 * 2 + “px”;

this.indexBox.children[0].appendChild(frg)

this.indexBox.children[0].addEventListener(“click”, (e) => {

console.log(“point”)

let pointIndex = (e.target).getAttribute(“data-index”)

if(pointIndex == this.index || this.animated){

return

}

let offset = (pointIndex - this.index) * this.sliderWidth

this.index = pointIndex

this.move(offset)

})

}

copyPic(){

const first = this.picBox.firstElementChild.cloneNode(true)

const last = this.picBox.lastElementChild.cloneNode(true)

this.picBox.appendChild(first)

this.picBox.insertBefore(last, this.picBox.firstElementChild)

this.picBox.style.width = this.sliderWidth * this.picBox.children.length + “px”

this.picBox.style.left = -1 * this.sliderWidth + “px”

}

move(offset){

this.animate(offset);

const num = this.indexBox.children[0].children.length

for(let i = 0; i < num; i++){

this.indexBox.children[0].children[i].className = “”

}

this.indexBox.children[0].children[this.index-1].className = “active”

}

animate(offset){

const time = 1000

const rate = 100

let speed = offset / (time/rate)

let goal = parseFloat(this.picBox.style.left) - offset

this.animated = true

let animate = setInterval(() => {

if( this.picBox.style.left == goal || Math.abs(Math.abs(parseFloat(this.picBox.style.left)) - Math.abs(goal)) < Math.abs(speed) ){

this.picBox.style.left == goal

clearInterval(animate)

this.animated = false

if(parseFloat(this.picBox.style.left) == 0){

this.picBox.style.left = -this.sliders * this.sliderWidth + “px”

}else if(parseFloat(this.picBox.style.left) == -(this.sliders+1)*this.sliderWidth){

this.picBox.style.left = -this.sliderWidth + “px”

}

}else{

this.picBox.style.left = parseFloat(this.picBox.style.left) - speed + “px”;

}

}, rate);

}

leftRight(){

this.box.querySelector(“.left-box”).addEventListener(“click”, () => {

//console.log(“left”)

if(this.animated){

return

}

if(this.index - 1 < 1){

this.index = this.sliders

}else{

this.index –

}

this.move(-this.sliderWidth)

})

this.box.querySelector(“.right-box”).addEventListener(“click”, () => {

//console.log(“right”)

if(this.animated){

return

}

if(this.index + 1 > this.sliders){

this.index = 1

}else{

this.index ++

}

this.move(this.sliderWidth)

})

}

play(){

this.auto = setInterval(() => {

this.box.querySelector(“.right-box”).click()

}, 2000);

this.box.addEventListener(“mouseenter”, () => {

clearInterval(this.auto)

})

this.box.addEventListener(“mouseleave”, () => {

this.auto = setInterval(() => {

this.box.querySelector(“.right-box”).click()

}, 2000);

})

}

}

４.左侧menu实现

export class Menu {

constructor(id){

this.box = document.querySelector(id)

this.ul = this.box.querySelector(“ul”)

this.lis = this.box.querySelectorAll(“li”)

this.subMenuEles = this.box.querySelectorAll(“.sub-menu”)

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

uerySelectorAll(“.sub-menu”)

最后

[外链图片转存中…(img-7IPhrd69-1715616620755)]

[外链图片转存中…(img-bQ07sWkP-1715616620756)]

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】