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

---

１.项目目录

２.主页面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


### 学习笔记

主要内容包括**html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue**等等

>**HTML/CSS**
>


**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

![](https://img-blog.csdnimg.cn/img_convert/e48ba70fae165a928c311a803327bae7.webp?x-oss-process=image/format,png)

>**HTML5 /CSS3**

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

![](https://img-blog.csdnimg.cn/img_convert/e8333222e2efc30c1d3abf2d36a82203.webp?x-oss-process=image/format,png)

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

[外链图片转存中...(img-Iaeas7DO-1718863022310)]

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

![](https://img-blog.csdnimg.cn/img_convert/396badbbab81bee63f0d584b41ac6071.webp?x-oss-process=image/format,png)