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

如果你喜欢一匹马，不要试图追它，你肯定追不上；你应该去种草种花，等到草长莺飞的季节，马自然会回来找你。

若马就是不回来呢？那也没关系啊，你有了草原和花海，这匹马不来，别的马也会来的。

说明：用vuecli搭建了一下项目，但其实主要还是使用CSS＋HTML＋JS 稍微适应了一下vue语法。

源码地址：我的git仓库：

一、主要效果展示

二、代码实现

１.项目目录

２.主页面CSS部分

好像有点多　截图吧

３.Slider实现

export class Slider {
    constructor(id){
        this.box = document.querySelector(id)
        this.picBox = this.box.querySelector("ul")
        this.indexBox = this.box.querySelector(".index-box")
        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")

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

三、git源码

https://github.com/Rachel-X-4869/JDstoreProject

更新中。。。