小实习项目 - 仿写京东商城 - CSS＋JS+HTML(1)

        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")



    this.timer1 = null

    this.timer2 = null



    this.init()

}

init(){

    this.lis.forEach((item) => {

        item.addEventListener("mouseenter", (e) => {

            let li = e.target;

            if(this.timer1 != null){

                clearTimeout(this.timer1)

            }

            this.timer1 = setTimeout(() => {

                this.subMenuEles.forEach((item) => {

                    item.classList.remove("active")

                })

                li.children[1].classList.add("active")

            }, 200)

        }, false)

    })

    this.lis.forEach((item) => {

        item.addEventListener("mouseleave", (e) => {

            let li = e.target;



            if(this.timer2 != null){

                clearTimeout(this.timer2)

            }

            this.timer2 = setTimeout(() => {

                li.children[1].classList.remove("active")

            }, 200)



        }, false)

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
img-FxMFiWfQ-1715236327501)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！